Complete Live Pages Examples¶

<div class="container mx-auto p-6 max-w-4xl">
    <h1 class="text-3xl font-bold text-gray-800 mb-8">Advanced Todo List</h1>

    <!-- Search and Filter Controls -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <!-- Text Search with partial matching -->
            <input
                type="text"
                id="searchInput"
                class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                placeholder="Search tasks (partial match)..."
            >

            <!-- Priority Filter (Multi-select) -->
            <div class="relative">
                <button
                    id="priorityDropdown"
                    onclick="togglePriorityDropdown()"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-left bg-white"
                >
                    <span id="priorityLabel">All Priorities</span>
                    <svg class="float-right mt-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div id="priorityOptions" class="hidden absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg">
                    <label class="flex items-center px-3 py-2 hover:bg-gray-50">
                        <input type="checkbox" value="high" onchange="updatePriorityFilter()" class="mr-2"> High
                    </label>
                    <label class="flex items-center px-3 py-2 hover:bg-gray-50">
                        <input type="checkbox" value="medium" onchange="updatePriorityFilter()" class="mr-2"> Medium
                    </label>
                    <label class="flex items-center px-3 py-2 hover:bg-gray-50">
                        <input type="checkbox" value="low" onchange="updatePriorityFilter()" class="mr-2"> Low
                    </label>
                </div>
            </div>

            <!-- Status Filter with default to hide completed -->
            <select id="statusFilter" class="px-3 py-2 border border-gray-300 rounded-md">
                <option value="pending" selected>Pending Only</option>
                <option value="all">All Tasks</option>
                <option value="completed">Completed</option>
                <option value="overdue">Overdue</option>
            </select>
        </div>

        <!-- Quick Filter Buttons & Bulk Actions -->
        <div class="flex flex-wrap justify-between items-center gap-2">
            <div class="flex flex-wrap gap-2">
                <button onclick="quickFilter('urgent')" class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">
                    Urgent Tasks
                </button>
                <button onclick="quickFilter('today')" class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
                    Due Today
                </button>
                <button onclick="clearFilters()" class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
                    Clear Filters
                </button>
            </div>

            <button
                onclick="clearCompletedTasks()"
                class="bg-red-500 text-white px-4 py-2 rounded-md text-sm hover:bg-red-600"
            >
                Clear Completed Tasks
            </button>
        </div>
    </div>

    <!-- Add New Task (with assignment dropdown) -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="grid grid-cols-1 gap-3">
            <input
                type="text"
                id="taskInput"
                class="w-full px-3 py-2 border border-gray-300 rounded-md"
                placeholder="Enter new task..."
            >
            <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                <select id="assigneeInput" class="px-3 py-2 border border-gray-300 rounded-md">
                    <!-- Populated dynamically -->
                </select>
                <select id="priorityInput" class="px-3 py-2 border border-gray-300 rounded-md">
                    <option value="low">Low</option>
                    <option value="medium">Medium</option>
                    <option value="high">High</option>
                </select>
                <input type="date" id="dueDateInput" class="px-3 py-2 border border-gray-300 rounded-md">
                <button onclick="addTask()" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
                    Add Task
                </button>
            </div>
        </div>
    </div>

    <!-- Edit Task Modal -->
    <div id="editModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 p-6">
            <h2 class="text-xl font-bold mb-4">Edit Task</h2>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium mb-1">Task Description</label>
                    <input
                        type="text"
                        id="editTaskText"
                        class="w-full px-3 py-2 border rounded-md"
                    >
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-1">Assigned To</label>
                        <select id="editAssigneeInput" class="w-full px-3 py-2 border rounded-md">
                            <!-- Populated dynamically -->
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Priority</label>
                        <select id="editPriorityInput" class="w-full px-3 py-2 border rounded-md">
                            <option value="low">Low</option>
                            <option value="medium">Medium</option>
                            <option value="high">High</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Due Date</label>
                        <input type="date" id="editDueDateInput" class="w-full px-3 py-2 border rounded-md">
                    </div>
                </div>
            </div>
            <div class="flex justify-end gap-2 mt-6">
                <button
                    onclick="closeEditModal()"
                    class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300"
                >
                    Cancel
                </button>
                <button
                    onclick="saveTaskEdit()"
                    class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
                >
                    Save Changes
                </button>
            </div>
        </div>
    </div>

    <!-- Tasks List -->
    <div id="tasksList" class="space-y-4">
        <!-- Tasks will be displayed here -->
    </div>

    <!-- Pagination Controls -->
    <div id="paginationControls" class="mt-6 flex justify-center items-center gap-4 bg-white rounded-lg shadow-md p-4">
        <button
            id="firstPageBtn"
            onclick="goToFirstPage()"
            class="px-3 py-2 bg-gray-200 rounded-md hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
        >
            First
        </button>
        <button
            id="prevPageBtn"
            onclick="goToPreviousPage()"
            class="px-3 py-2 bg-gray-200 rounded-md hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
        >
            Previous
        </button>
        <span id="pageInfo" class="text-gray-700 font-medium">
            Page 1
        </span>
        <button
            id="nextPageBtn"
            onclick="goToNextPage()"
            class="px-3 py-2 bg-gray-200 rounded-md hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
        >
            Next
        </button>
    </div>
</div>

<script>
let allMembers = [];
let currentUserId = null;
let selectedPriorities = [];
let searchTimeout;
let currentPage = 1;
let pageSize = 20;
let hasMorePages = false;
let editingTaskId = null;

// Initialize the application
document.addEventListener('DOMContentLoaded', async () => {
    // Load chat members first
    allMembers = await pt.getChatMembers();

    // Identify current user using is_logged_user
    const currentUser = allMembers.find(m => m.is_logged_user);
    currentUserId = currentUser?.id;

    // Populate assignee dropdowns
    populateAssigneeDropdowns();

    // Load user's saved filter configuration
    await loadFilterConfig();

    // Apply filters and load tasks
    await applyFilters();
    setupEventListeners();
});

// Populate assignee dropdowns with chat members
function populateAssigneeDropdowns() {
    const users = allMembers.filter(m => m.type === 'user');

    const options = users.map(user => {
        const selected = user.id === currentUserId ? 'selected' : '';
        return `<option value="${user.id}" ${selected}>${user.name}</option>`;
    }).join('');

    // Populate new task dropdown (current user selected by default)
    document.getElementById('assigneeInput').innerHTML = options;

    // Populate edit modal dropdown
    document.getElementById('editAssigneeInput').innerHTML = options;
}

// Load user's saved filter preferences from filter_config entity
async function loadFilterConfig() {
    if (!currentUserId) return;

    try {
        const configs = await pt.list({
            entityNames: ['filter_config'],
            filters: { creator_user_id: currentUserId }
        });

        if (configs.length > 0) {
            const config = configs[0].data;

            if (config.searchTerm) {
                document.getElementById('searchInput').value = config.searchTerm;
            }

            if (config.statusFilter) {
                document.getElementById('statusFilter').value = config.statusFilter;
            }

            if (config.selectedPriorities && Array.isArray(config.selectedPriorities)) {
                selectedPriorities = config.selectedPriorities;
                const checkboxes = document.querySelectorAll('#priorityOptions input[type="checkbox"]');
                checkboxes.forEach(cb => {
                    cb.checked = selectedPriorities.includes(cb.value);
                });
                updatePriorityLabel();
            }

            if (config.pageSize) {
                pageSize = config.pageSize;
            }
        }
    } catch (error) {
        console.error('Error loading filter config:', error);
    }
}

// Save current filter preferences to filter_config entity
async function saveFilterConfig() {
    if (!currentUserId) return;

    try {
        const searchTerm = document.getElementById('searchInput').value.trim();
        const statusFilter = document.getElementById('statusFilter').value;

        const configs = await pt.list({
            entityNames: ['filter_config'],
            filters: { creator_user_id: currentUserId }
        });

        const configData = {
            searchTerm: searchTerm,
            statusFilter: statusFilter,
            selectedPriorities: selectedPriorities,
            pageSize: pageSize
        };

        if (configs.length > 0) {
            await pt.edit(configs[0].id, configData);
        } else {
            await pt.add('filter_config', configData);
        }
    } catch (error) {
        console.error('Error saving filter config:', error);
    }
}

function setupEventListeners() {
    const searchInput = document.getElementById('searchInput');
    searchInput.addEventListener('input', () => {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => applyFilters(), 300);
    });

    const statusFilter = document.getElementById('statusFilter');
    statusFilter.addEventListener('change', () => applyFilters());

    document.addEventListener('click', (e) => {
        const dropdown = document.getElementById('priorityOptions');
        const button = document.getElementById('priorityDropdown');
        if (!dropdown.contains(e.target) && !button.contains(e.target)) {
            dropdown.classList.add('hidden');
        }
    });
}

function togglePriorityDropdown() {
    document.getElementById('priorityOptions').classList.toggle('hidden');
}

function updatePriorityLabel() {
    const label = document.getElementById('priorityLabel');
    if (selectedPriorities.length === 0 || selectedPriorities.length === 3) {
        label.textContent = 'All Priorities';
    } else {
        label.textContent = selectedPriorities.map(p => p.charAt(0).toUpperCase() + p.slice(1)).join(', ');
    }
}

function updatePriorityFilter() {
    const checkboxes = document.querySelectorAll('#priorityOptions input[type="checkbox"]');
    selectedPriorities = Array.from(checkboxes)
        .filter(cb => cb.checked)
        .map(cb => cb.value);

    updatePriorityLabel();
    applyFilters();
}

async function applyFilters(resetPage = true) {
    if (resetPage) {
        currentPage = 1;
    }

    const searchTerm = document.getElementById('searchInput').value.trim();
    const statusFilter = document.getElementById('statusFilter').value;

    await saveFilterConfig();

    let serverFilters = {};

    if (searchTerm) {
        serverFilters.text = { $contains: searchTerm };
    }

    if (selectedPriorities.length > 0 && selectedPriorities.length < 3) {
        serverFilters.priority = { $in: selectedPriorities };
    }

    if (statusFilter === 'pending') {
        serverFilters.completed = { $ne: "true" };
    } else if (statusFilter === 'completed') {
        serverFilters.completed = "true";
    }

    try {
        const result = await pt.list({
            entityNames: ['task'],
            filters: serverFilters,
            page: currentPage,
            pageSize: pageSize,
            returnMetadata: true
        });

        let filteredTasks = result.entities.filter(entity => entity.entity_name === 'task');

        if (statusFilter === 'overdue') {
            const today = new Date().toISOString().split('T')[0];
            filteredTasks = filteredTasks.filter(task =>
                task.data.due_date &&
                task.data.due_date < today &&
                task.data.completed !== "true"
            );
        }

        hasMorePages = result.pagination.has_more;
        updatePaginationControls();

        displayTasks(filteredTasks);
    } catch (error) {
        console.error('Error filtering tasks:', error);
    }
}

function updatePaginationControls() {
    document.getElementById('pageInfo').textContent = `Page ${currentPage}`;
    document.getElementById('firstPageBtn').disabled = currentPage === 1;
    document.getElementById('prevPageBtn').disabled = currentPage === 1;
    document.getElementById('nextPageBtn').disabled = !hasMorePages;
}

async function goToFirstPage() {
    currentPage = 1;
    await applyFilters(false);
}

async function goToPreviousPage() {
    if (currentPage > 1) {
        currentPage--;
        await applyFilters(false);
    }
}

async function goToNextPage() {
    if (hasMorePages) {
        currentPage++;
        await applyFilters(false);
    }
}

function displayTasks(tasks) {
    const tasksList = document.getElementById('tasksList');

    if (tasks.length === 0) {
        tasksList.innerHTML = '<div class="text-center py-8 text-gray-500">No tasks found</div>';
        return;
    }

    tasksList.innerHTML = tasks.map(task => {
        const taskData = task.data;
        const isCompleted = taskData.completed === "true";
        const today = new Date().toISOString().split('T')[0];
        const isOverdue = taskData.due_date && taskData.due_date < today && !isCompleted;

        const creator = allMembers.find(m => m.id === task.creator_user_id);
        const creatorName = creator ? creator.name : 'Unknown';

        const assignee = allMembers.find(m => m.id === taskData.assignee_id);
        const assigneeName = assignee ? assignee.name : 'Unassigned';

        let dueDateDisplay = '';
        if (taskData.due_date) {
            const formattedDate = formatDate(taskData.due_date);
            dueDateDisplay = isOverdue ? `Due: ${formattedDate} (Overdue)` : `Due: ${formattedDate}`;
        }

        return `
            <div class="bg-white rounded-lg shadow-md p-4 ${isCompleted ? 'opacity-75' : ''} cursor-pointer hover:shadow-lg transition-shadow">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3 flex-1" onclick="openEditModal(${task.id})">
                        <input
                            type="checkbox"
                            ${isCompleted ? 'checked' : ''}
                            onchange="toggleTask(${task.id})"
                            onclick="event.stopPropagation()"
                            class="h-4 w-4 text-blue-600"
                        >
                        <span class="${isCompleted ? 'line-through text-gray-500' : 'text-gray-800'} flex-1">
                            ${escapeHtml(taskData.text)}
                        </span>
                        <span class="px-2 py-1 text-xs rounded-full ${getPriorityColor(taskData.priority)}">
                            ${taskData.priority}
                        </span>
                        ${dueDateDisplay ? `<span class="text-sm ${isOverdue ? 'text-red-500' : 'text-gray-500'}">${dueDateDisplay}</span>` : ''}
                    </div>
                    <div class="flex items-center gap-3 ml-3">
                        <div class="text-xs text-gray-500">
                            <div>Assigned: <span class="font-medium">${escapeHtml(assigneeName)}</span></div>
                            <div class="text-gray-400 italic">By: ${escapeHtml(creatorName)}</div>
                        </div>
                        <button
                            onclick="deleteTask(${task.id}); event.stopPropagation()"
                            class="text-red-500 hover:text-red-700"
                        >
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

// Open edit modal with task data
async function openEditModal(taskId) {
    editingTaskId = taskId;
    const task = await pt.get(taskId);

    document.getElementById('editTaskText').value = task.data.text || '';
    document.getElementById('editAssigneeInput').value = task.data.assignee_id || '';
    document.getElementById('editPriorityInput').value = task.data.priority || 'low';
    document.getElementById('editDueDateInput').value = task.data.due_date || '';

    document.getElementById('editModal').classList.remove('hidden');
}

// Close edit modal
function closeEditModal() {
    editingTaskId = null;
    document.getElementById('editModal').classList.add('hidden');
}

// Save edited task
async function saveTaskEdit() {
    if (!editingTaskId) return;

    try {
        const task = await pt.get(editingTaskId);

        const updatedData = {
            ...task.data,
            text: document.getElementById('editTaskText').value.trim(),
            assignee_id: parseInt(document.getElementById('editAssigneeInput').value),
            priority: document.getElementById('editPriorityInput').value,
            due_date: document.getElementById('editDueDateInput').value || null
        };

        await pt.edit(editingTaskId, updatedData);
        closeEditModal();
        await applyFilters(false);
    } catch (error) {
        console.error('Error saving task:', error);
        alert('Failed to save changes');
    }
}

function quickFilter(type) {
    if (type === 'urgent') {
        document.getElementById('searchInput').value = 'urgent';
    } else if (type === 'today') {
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('dueDateInput').value = today;
    }
    applyFilters();
}

function clearFilters() {
    document.getElementById('searchInput').value = '';
    document.getElementById('statusFilter').value = 'pending';
    selectedPriorities = [];

    const checkboxes = document.querySelectorAll('#priorityOptions input[type="checkbox"]');
    checkboxes.forEach(cb => cb.checked = false);

    document.getElementById('priorityLabel').textContent = 'All Priorities';

    applyFilters();
}

async function clearCompletedTasks() {
    const completedEntities = await pt.list({
        entityNames: ['task'],
        filters: { completed: "true" },
        limit: 1000
    });

    const completedTasks = completedEntities.filter(entity => entity.entity_name === 'task');

    if (completedTasks.length === 0) {
        alert('No completed tasks to clear.');
        return;
    }

    const confirmMessage = `Delete ${completedTasks.length} completed task${completedTasks.length > 1 ? 's' : ''}? This cannot be undone.`;

    if (confirm(confirmMessage)) {
        const deletePromises = completedTasks.map(task => pt.delete(task.id));
        await Promise.all(deletePromises);
        await applyFilters();
        alert(`Deleted ${completedTasks.length} completed task${completedTasks.length > 1 ? 's' : ''}.`);
    }
}

async function addTask() {
    const text = document.getElementById('taskInput').value.trim();
    const assigneeId = document.getElementById('assigneeInput').value;
    const priority = document.getElementById('priorityInput').value;
    const dueDate = document.getElementById('dueDateInput').value;

    if (!text) return;

    try {
        await pt.add('task', {
            text: text,
            completed: "false",
            assignee_id: parseInt(assigneeId),
            priority: priority,
            due_date: dueDate || null
        });

        // Only clear task text - preserve other fields for easier batch entry
        document.getElementById('taskInput').value = '';
        await applyFilters();
    } catch (error) {
        console.error('Error adding task:', error);
    }
}

async function toggleTask(taskId) {
    try {
        const task = await pt.get(taskId);
        await pt.edit(taskId, {
            ...task.data,
            completed: task.data.completed === "true" ? "false" : "true"
        });
        await applyFilters();
    } catch (error) {
        console.error('Error toggling task:', error);
    }
}

async function deleteTask(taskId) {
    if (confirm('Delete this task? This cannot be undone.')) {
        try {
            await pt.delete(taskId);
            await applyFilters();
        } catch (error) {
            console.error('Error deleting task:', error);
        }
    }
}

function formatDate(dateString) {
    const date = new Date(dateString);
    const today = new Date();

    if (date.toDateString() === today.toDateString()) {
        return 'Today';
    } else if (date.toDateString() === new Date(today.getTime() + 86400000).toDateString()) {
        return 'Tomorrow';
    } else {
        return date.toLocaleDateString();
    }
}

function getPriorityColor(priority) {
    const colors = {
        high: 'bg-red-100 text-red-800',
        medium: 'bg-yellow-100 text-yellow-800',
        low: 'bg-green-100 text-green-800'
    };
    return colors[priority] || colors.low;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
</script>

<div class="container mx-auto p-6 max-w-2xl">
    <h1 class="text-2xl font-bold mb-4">My Tasks</h1>

    <div class="flex gap-2 mb-4">
        <input
            type="text"
            id="taskInput"
            class="flex-1 px-3 py-2 border rounded"
            placeholder="New task..."
        >
        <button
            onclick="addTask()"
            class="bg-blue-500 text-white px-4 py-2 rounded"
        >
            Add
        </button>
    </div>

    <div id="tasksList"></div>
</div>

<script>
async function loadTasks() {
    const entities = await pt.list({
        entityNames: ['task'],
        filters: { completed: false }
    });

    const tasks = entities.filter(e => e.entity_name === 'task');

    document.getElementById('tasksList').innerHTML = tasks.map(task => `
        <div class="bg-white p-4 rounded shadow mb-2 flex justify-between items-center">
            <div class="flex items-center gap-3">
                <input
                    type="checkbox"
                    onchange="toggleTask(${task.id})"
                    class="h-4 w-4"
                >
                <span>${task.data.text}</span>
            </div>
            <button onclick="deleteTask(${task.id})" class="text-red-500">
                Delete
            </button>
        </div>
    `).join('');
}

async function addTask() {
    const text = document.getElementById('taskInput').value.trim();
    if (!text) return;

    await pt.add('task', {
        text: text,
        completed: false
    });

    document.getElementById('taskInput').value = '';
    await loadTasks();
}

async function toggleTask(taskId) {
    const task = await pt.get(taskId);
    await pt.edit(taskId, {
        ...task.data,
        completed: !task.data.completed
    });
    await loadTasks();
}

async function deleteTask(taskId) {
    await pt.delete(taskId);
    await loadTasks();
}

document.addEventListener('DOMContentLoaded', loadTasks);
</script>

<div class="container mx-auto p-6">
    <h1 class="text-2xl font-bold mb-4">My Notes</h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Notes List -->
        <div class="md:col-span-1">
            <button onclick="createNewNote()" class="w-full bg-blue-500 text-white px-4 py-2 rounded mb-4">
                New Note
            </button>
            <div id="notesList" class="space-y-2"></div>
        </div>

        <!-- Note Editor -->
        <div class="md:col-span-2">
            <div id="noteEditor" class="bg-white rounded-lg shadow p-6">
                <input
                    type="text"
                    id="noteTitle"
                    placeholder="Note title..."
                    class="w-full text-xl font-bold mb-4 px-3 py-2 border rounded"
                >
                <textarea
                    id="noteContent"
                    rows="20"
                    placeholder="Start typing..."
                    class="w-full px-3 py-2 border rounded"
                ></textarea>
                <div class="flex gap-2 mt-4">
                    <button onclick="saveNote()" class="bg-green-500 text-white px-4 py-2 rounded">
                        Save
                    </button>
                    <button onclick="deleteCurrentNote()" class="bg-red-500 text-white px-4 py-2 rounded">
                        Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let currentNoteId = null;

async function loadNotes() {
    const entities = await pt.list({
        entityNames: ['note'],
        limit: 100
    });

    const notes = entities.filter(e => e.entity_name === 'note');

    document.getElementById('notesList').innerHTML = notes.map(note => `
        <div
            onclick="selectNote(${note.id})"
            class="bg-white p-3 rounded shadow cursor-pointer hover:bg-gray-50 ${currentNoteId === note.id ? 'border-2 border-blue-500' : ''}"
        >
            <div class="font-semibold">${note.data.title || 'Untitled'}</div>
            <div class="text-xs text-gray-500">${new Date(note.updated_at).toLocaleDateString()}</div>
        </div>
    `).join('');
}

async function selectNote(noteId) {
    const note = await pt.get(noteId);
    currentNoteId = noteId;

    document.getElementById('noteTitle').value = note.data.title || '';
    document.getElementById('noteContent').value = note.data.content || '';

    await loadNotes();
}

async function createNewNote() {
    const result = await pt.add('note', {
        title: 'New Note',
        content: ''
    });

    currentNoteId = result.id;
    await loadNotes();
    await selectNote(result.id);
}

async function saveNote() {
    if (!currentNoteId) {
        await createNewNote();
        return;
    }

    const title = document.getElementById('noteTitle').value.trim();
    const content = document.getElementById('noteContent').value;

    const note = await pt.get(currentNoteId);
    await pt.edit(currentNoteId, {
        ...note.data,
        title: title,
        content: content
    });

    await loadNotes();
}

async function deleteCurrentNote() {
    if (!currentNoteId) return;

    if (confirm('Delete this note?')) {
        await pt.delete(currentNoteId);
        currentNoteId = null;
        document.getElementById('noteTitle').value = '';
        document.getElementById('noteContent').value = '';
        await loadNotes();
    }
}

document.addEventListener('DOMContentLoaded', loadNotes);

// Auto-save every 30 seconds
setInterval(() => {
    if (currentNoteId) {
        saveNote();
    }
}, 30000);
</script>

<div class="container mx-auto p-6">
    <h1 class="text-2xl font-bold mb-4">Contacts</h1>

    <!-- Add Contact Form -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-semibold mb-4">Add Contact</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <input type="text" id="contactName" placeholder="Name" class="px-3 py-2 border rounded">
            <input type="email" id="contactEmail" placeholder="Email" class="px-3 py-2 border rounded">
            <input type="tel" id="contactPhone" placeholder="Phone" class="px-3 py-2 border rounded">
            <input type="text" id="contactCompany" placeholder="Company" class="px-3 py-2 border rounded">
        </div>
        <button onclick="addContact()" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">
            Add Contact
        </button>
    </div>

    <!-- Search -->
    <input
        type="text"
        id="searchInput"
        placeholder="Search contacts..."
        class="w-full px-3 py-2 border rounded mb-4"
    >

    <!-- Contacts Grid -->
    <div id="contactsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
</div>

<script>
let searchTimeout;

async function loadContacts() {
    const searchTerm = document.getElementById('searchInput').value.trim();

    const filters = searchTerm ? {
        $or: [
            { name: { $contains: searchTerm } },
            { email: { $contains: searchTerm } },
            { company: { $contains: searchTerm } }
        ]
    } : {};

    const entities = await pt.list({
        entityNames: ['contact'],
        filters: filters,
        limit: 100
    });

    const contacts = entities.filter(e => e.entity_name === 'contact');

    document.getElementById('contactsGrid').innerHTML = contacts.map(contact => `
        <div class="bg-white rounded-lg shadow p-4">
            <h3 class="font-semibold text-lg">${contact.data.name}</h3>
            <p class="text-sm text-gray-600">${contact.data.email || ''}</p>
            <p class="text-sm text-gray-600">${contact.data.phone || ''}</p>
            <p class="text-sm text-gray-500">${contact.data.company || ''}</p>
            <button onclick="deleteContact(${contact.id})" class="mt-2 text-red-500 text-sm">
                Delete
            </button>
        </div>
    `).join('');
}

async function addContact() {
    const name = document.getElementById('contactName').value.trim();
    const email = document.getElementById('contactEmail').value.trim();
    const phone = document.getElementById('contactPhone').value.trim();
    const company = document.getElementById('contactCompany').value.trim();

    if (!name) return;

    await pt.add('contact', {
        name: name,
        email: email,
        phone: phone,
        company: company
    });

    document.getElementById('contactName').value = '';
    document.getElementById('contactEmail').value = '';
    document.getElementById('contactPhone').value = '';
    document.getElementById('contactCompany').value = '';

    await loadContacts();
}

async function deleteContact(contactId) {
    if (confirm('Delete this contact?')) {
        await pt.delete(contactId);
        await loadContacts();
    }
}

document.getElementById('searchInput').addEventListener('input', () => {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(loadContacts, 300);
});

document.addEventListener('DOMContentLoaded', loadContacts);
</script>

<div class="container mx-auto p-6 max-w-4xl">
    <h1 class="text-3xl font-bold text-gray-800 mb-8">Chat Integration Demo</h1>

    <!-- Send Message Section -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Send Message to Chat</h2>

        <div class="flex gap-2 mb-4">
            <input
                type="text"
                id="chatInput"
                placeholder="Type a message..."
                class="flex-1 border rounded px-3 py-2"
                onkeypress="if(event.key==='Enter') sendChatMessage()"
            >
            <button
                onclick="sendChatMessage()"
                class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
            >
                Send
            </button>
        </div>

        <!-- Quick Message Buttons -->
        <div class="flex flex-wrap gap-2">
            <button
                onclick="pt.addMessage('Task completed!')"
                class="bg-green-100 text-green-800 px-3 py-1 rounded text-sm hover:bg-green-200"
            >
                Quick: Task Completed
            </button>
            <button
                onclick="pt.addMessage('Need assistance with this task')"
                class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded text-sm hover:bg-yellow-200"
            >
                Quick: Need Help
            </button>
            <button
                onclick="pt.addMessage('Review requested')"
                class="bg-purple-100 text-purple-800 px-3 py-1 rounded text-sm hover:bg-purple-200"
            >
                Quick: Review Requested
            </button>
        </div>
    </div>

    <!-- File Upload Section -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Upload Files to Chat</h2>

        <!-- Standard Form Upload -->
        <form id="uploadForm" onsubmit="handleUpload(event)" class="mb-6">
            <div class="mb-4">
                <label class="block text-sm font-medium mb-2">Select Files</label>
                <input
                    type="file"
                    name="files"
                    multiple
                    class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
                    onchange="previewFiles(this)"
                >
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium mb-2">Message (optional)</label>
                <input
                    type="text"
                    name="message"
                    placeholder="Add a message with your files..."
                    class="border rounded px-3 py-2 w-full"
                >
            </div>

            <div id="filePreview" class="mb-4"></div>

            <button
                type="submit"
                class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
            >
                Upload Files
            </button>
        </form>

        <!-- Drag and Drop Zone -->
        <div
            id="dropZone"
            ondrop="handleDrop(event)"
            ondragover="handleDragOver(event)"
            ondragleave="handleDragLeave(event)"
            class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-colors"
        >
            <svg class="mx-auto h-12 w-12 text-gray-400 mb-3" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <p class="text-gray-600 font-medium mb-1">Drop files here to upload</p>
            <p class="text-gray-400 text-sm">or use the file selector above</p>
        </div>
    </div>

    <!-- Status Messages -->
    <div id="statusMessage" class="hidden rounded-lg p-4 mb-4"></div>

    <!-- Recent Actions Log -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4">Recent Actions</h2>
        <div id="actionsLog" class="space-y-2 max-h-64 overflow-y-auto"></div>
    </div>
</div>

<script>
const actionsLog = [];

// Send message from input
async function sendChatMessage() {
    const input = document.getElementById('chatInput');
    const message = input.value.trim();

    if (!message) {
        showStatus('Please enter a message', 'error');
        return;
    }

    try {
        const result = await pt.addMessage(message);
        input.value = '';
        showStatus('Message sent successfully!', 'success');
        logAction('Message sent', message);
    } catch (error) {
        showStatus('Failed to send message: ' + error.message, 'error');
        console.error('Error:', error);
    }
}

// Handle form upload
async function handleUpload(event) {
    event.preventDefault();
    const form = event.target;
    const fileInput = form.querySelector('input[type="file"]');
    const messageInput = form.querySelector('input[name="message"]');
    const message = messageInput?.value.trim() || 'Uploaded files from Live Page';

    if (fileInput.files.length === 0) {
        showStatus('Please select at least one file', 'error');
        return;
    }

    const formData = new FormData();
    for (const file of fileInput.files) {
        formData.append('files', file);
    }

    try {
        const result = await pt.addMessage(formData, message);
        showStatus(`Successfully uploaded ${result.result.files_count} file(s) with message!`, 'success');
        logAction('File upload', `${result.result.files_count} file(s) uploaded`);
        form.reset();
        document.getElementById('filePreview').innerHTML = '';
    } catch (error) {
        showStatus('Upload failed: ' + error.message, 'error');
        console.error('Upload error:', error);
    }
}

// Handle drag and drop
async function handleDrop(event) {
    event.preventDefault();
    const dropZone = document.getElementById('dropZone');
    dropZone.classList.remove('border-blue-500', 'bg-blue-50');

    const files = event.dataTransfer.files;
    if (files.length === 0) return;

    const formData = new FormData();
    for (const file of files) {
        formData.append('files', file);
    }

    try {
        const result = await pt.addMessage(formData, 'Files uploaded via drag & drop');
        showStatus(`Uploaded ${result.result.files_count} file(s) via drag & drop`, 'success');
        logAction('Drag & drop upload', `${result.result.files_count} file(s)`);
    } catch (error) {
        showStatus('Upload failed: ' + error.message, 'error');
        console.error('Upload error:', error);
    }
}

function handleDragOver(event) {
    event.preventDefault();
    const dropZone = document.getElementById('dropZone');
    dropZone.classList.add('border-blue-500', 'bg-blue-50');
}

function handleDragLeave(event) {
    const dropZone = document.getElementById('dropZone');
    dropZone.classList.remove('border-blue-500', 'bg-blue-50');
}

// Preview selected files
function previewFiles(input) {
    const preview = document.getElementById('filePreview');
    const files = input.files;

    if (files.length === 0) {
        preview.innerHTML = '';
        return;
    }

    const fileList = Array.from(files).map(file => {
        const sizeKB = (file.size / 1024).toFixed(2);
        return `
            <div class="flex items-center gap-2 text-sm text-gray-600 bg-gray-50 p-2 rounded">
                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" />
                </svg>
                <span class="flex-1">${file.name}</span>
                <span class="text-gray-400">${sizeKB} KB</span>
            </div>
        `;
    }).join('');

    preview.innerHTML = `
        <div class="space-y-1">
            <p class="text-sm font-medium text-gray-700 mb-2">${files.length} file(s) selected:</p>
            ${fileList}
        </div>
    `;
}

// Show status message
function showStatus(message, type = 'success') {
    const statusDiv = document.getElementById('statusMessage');
    const bgColor = type === 'success' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700';

    statusDiv.className = `rounded-lg p-4 mb-4 ${bgColor}`;
    statusDiv.textContent = message;
    statusDiv.classList.remove('hidden');

    setTimeout(() => {
        statusDiv.classList.add('hidden');
    }, 5000);
}

// Log action
function logAction(action, details) {
    const timestamp = new Date().toLocaleTimeString();
    actionsLog.unshift({ action, details, timestamp });

    // Keep only last 10 actions
    if (actionsLog.length > 10) {
        actionsLog.pop();
    }

    updateActionsLog();
}

function updateActionsLog() {
    const logDiv = document.getElementById('actionsLog');

    if (actionsLog.length === 0) {
        logDiv.innerHTML = '<p class="text-gray-400 text-sm">No actions yet</p>';
        return;
    }

    logDiv.innerHTML = actionsLog.map(log => `
        <div class="flex items-start gap-3 p-3 bg-gray-50 rounded">
            <div class="flex-1">
                <div class="font-medium text-sm">${log.action}</div>
                <div class="text-sm text-gray-600">${log.details}</div>
            </div>
            <div class="text-xs text-gray-400">${log.timestamp}</div>
        </div>
    `).join('');
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    updateActionsLog();
});
</script>