dtSpark 1.0.4__py3-none-any.whl

dtSpark/web/templates/chat.html

@@ -0,0 +1,814 @@
+{% extends "base.html" %}
+
+{% block title %}Chat - {{ conversation_name }} - {{ app_name }}{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-12">
+        <h2 class="mb-3">
+            <i class="bi bi-chat-dots-fill"></i> {{ conversation_name }}
+            <button class="btn btn-sm btn-outline-secondary float-end" data-bs-toggle="modal" data-bs-target="#infoModal">
+                <i class="bi bi-info-circle"></i> Info
+            </button>
+        </h2>
+    </div>
+</div>
+
+<!-- Chat Messages Area -->
+<div class="row">
+    <div class="col-12">
+        <div class="card mb-3" style="height: 60vh;">
+            <div class="card-body overflow-auto" id="chat-messages">
+                <!-- Messages will be appended here -->
+                <div class="text-center text-muted">
+                    <div class="spinner-border spinner-border-sm" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                    <span class="ms-2">Loading chat history...</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Chat Input Area -->
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <form id="chat-form">
+                    <div class="mb-3">
+                        <label for="message-input" class="form-label">Your Message</label>
+                        <textarea
+                            class="form-control"
+                            id="message-input"
+                            rows="3"
+                            placeholder="Type your message here..."
+                            required
+                        ></textarea>
+                    </div>
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div class="btn-group" role="group">
+                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="showCommandMenu()">
+                                <i class="bi bi-terminal"></i> Commands
+                            </button>
+                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="attachFiles()">
+                                <i class="bi bi-paperclip"></i> Attach
+                            </button>
+                        </div>
+                        <button type="submit" class="btn btn-primary" id="send-btn">
+                            <i class="bi bi-send-fill"></i> Send
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Info Modal -->
+<div class="modal fade" id="infoModal" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title"><i class="bi bi-info-circle"></i> Conversation Information</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body" id="info-content">
+                <div class="text-center">
+                    <div class="spinner-border spinner-border-sm" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+// Load conversation info when modal is shown
+document.getElementById('infoModal').addEventListener('show.bs.modal', function() {
+    loadConversationInfo();
+});
+</script>
+
+<!-- Command Menu Modal -->
+<div class="modal fade" id="commandModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title"><i class="bi bi-terminal"></i> Commands</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <div class="list-group">
+                    <button class="list-group-item list-group-item-action" onclick="executeCommand('history')">
+                        <i class="bi bi-clock-history"></i> View History
+                    </button>
+                    <button class="list-group-item list-group-item-action" onclick="executeCommand('info')">
+                        <i class="bi bi-info-circle"></i> Show Info
+                    </button>
+                    <button class="list-group-item list-group-item-action" onclick="executeCommand('changemodel')">
+                        <i class="bi bi-arrow-repeat"></i> Change Model
+                    </button>
+                    <button class="list-group-item list-group-item-action" onclick="executeCommand('export')">
+                        <i class="bi bi-download"></i> Export Conversation
+                    </button>
+                    <button class="list-group-item list-group-item-action" onclick="executeCommand('mcpaudit')">
+                        <i class="bi bi-shield-check"></i> MCP Audit Log
+                    </button>
+                    <button class="list-group-item list-group-item-action" onclick="executeCommand('mcpservers')">
+                        <i class="bi bi-hdd-network"></i> MCP Server Management
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="/static/js/chat.js"></script>
+<script src="/static/js/sse-client.js"></script>
+<script>
+// Initialise chat with conversation ID
+const conversationId = {{ conversation_id }};
+
+// Load chat history on page load
+window.addEventListener('load', () => {
+    loadChatHistory(conversationId);
+});
+
+// Handle chat form submission
+document.getElementById('chat-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const messageInput = document.getElementById('message-input');
+    const message = messageInput.value.trim();
+
+    if (!message) return;
+
+    // Clear input
+    messageInput.value = '';
+
+    // Disable send button
+    const sendBtn = document.getElementById('send-btn');
+    sendBtn.disabled = true;
+    sendBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Sending...';
+
+    // Add user message to chat
+    appendMessage('user', message);
+
+    // Send message via SSE
+    await sendMessageWithSSE(conversationId, message);
+
+    // Re-enable send button
+    sendBtn.disabled = false;
+    sendBtn.innerHTML = '<i class="bi bi-send-fill"></i> Send';
+
+    // Focus on input
+    messageInput.focus();
+});
+
+// Show command menu
+function showCommandMenu() {
+    const modal = new bootstrap.Modal(document.getElementById('commandModal'));
+    modal.show();
+}
+
+// Execute command
+async function executeCommand(command) {
+    // Close modal
+    bootstrap.Modal.getInstance(document.getElementById('commandModal')).hide();
+
+    // Execute command based on type
+    switch (command) {
+        case 'info':
+            await loadConversationInfo();
+            const infoModal = new bootstrap.Modal(document.getElementById('infoModal'));
+            infoModal.show();
+            break;
+        case 'history':
+            await loadChatHistory(conversationId);
+            break;
+        case 'export':
+            await showExportModal();
+            break;
+        case 'changemodel':
+            await showChangeModelModal();
+            break;
+        case 'mcpaudit':
+            await showMCPAuditModal();
+            break;
+        case 'mcpservers':
+            await showMCPServersModal();
+            break;
+        default:
+            alert(`Command '${command}' not yet implemented in web UI`);
+    }
+}
+
+// Export conversation
+async function showExportModal() {
+    const modalHTML = `
+        <div class="modal fade" id="exportModal" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title"><i class="bi bi-download"></i> Export Conversation</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label class="form-label">Export Format</label>
+                            <select class="form-select" id="export-format">
+                                <option value="markdown">Markdown (.md)</option>
+                                <option value="html">HTML (.html)</option>
+                                <option value="csv">CSV (.csv)</option>
+                            </select>
+                        </div>
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="export-include-tools" checked>
+                            <label class="form-check-label" for="export-include-tools">
+                                Include tool call details
+                            </label>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-primary" onclick="performExport()">
+                            <i class="bi bi-download"></i> Export
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Remove old modal if exists
+    const oldModal = document.getElementById('exportModal');
+    if (oldModal) oldModal.remove();
+
+    document.body.insertAdjacentHTML('beforeend', modalHTML);
+    const modal = new bootstrap.Modal(document.getElementById('exportModal'));
+    modal.show();
+}
+
+async function performExport() {
+    const format = document.getElementById('export-format').value;
+    const includeTools = document.getElementById('export-include-tools').checked;
+
+    try {
+        const formData = new FormData();
+        formData.append('format', format);
+        formData.append('include_tools', includeTools);
+
+        const response = await fetch(`/api/chat/${conversationId}/command/export`, {
+            method: 'POST',
+            body: formData
+        });
+
+        const data = await response.json();
+
+        if (data.status === 'success') {
+            // Download file
+            const blob = new Blob([data.content], { type: 'text/plain' });
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `conversation_${conversationId}.${data.format === 'markdown' ? 'md' : data.format}`;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            a.remove();
+
+            // Close modal
+            bootstrap.Modal.getInstance(document.getElementById('exportModal')).hide();
+            showToast('Conversation exported successfully', 'success');
+        }
+    } catch (error) {
+        showToast('Failed to export conversation', 'error');
+    }
+}
+
+// Change model
+async function showChangeModelModal() {
+    const modalHTML = `
+        <div class="modal fade" id="changeModelModal" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title"><i class="bi bi-arrow-repeat"></i> Change Model</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label class="form-label">Select New Model</label>
+                            <select class="form-select" id="new-model-select">
+                                <option value="">Loading models...</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-primary" onclick="performChangeModel()">
+                            <i class="bi bi-check-circle-fill"></i> Change Model
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Remove old modal if exists
+    const oldModal = document.getElementById('changeModelModal');
+    if (oldModal) oldModal.remove();
+
+    document.body.insertAdjacentHTML('beforeend', modalHTML);
+
+    // Load models
+    try {
+        const response = await fetch('/api/models');
+        const models = await response.json();
+
+        const select = document.getElementById('new-model-select');
+        select.innerHTML = '<option value="">Select a model...</option>';
+
+        models.forEach(model => {
+            const option = document.createElement('option');
+            option.value = model.id;
+
+            // Show service provider and optionally model maker
+            let displayText = model.name;
+            if (model.model_maker && model.provider !== model.model_maker) {
+                // Show both: "Model Name [Model Maker via Service Provider]"
+                displayText += ` [${model.model_maker} via ${model.provider}]`;
+            } else {
+                // Show service only: "Model Name [Service Provider]"
+                displayText += ` [${model.provider}]`;
+            }
+
+            option.textContent = displayText;
+            select.appendChild(option);
+        });
+    } catch (error) {
+        document.getElementById('new-model-select').innerHTML = '<option value="">Failed to load models</option>';
+    }
+
+    const modal = new bootstrap.Modal(document.getElementById('changeModelModal'));
+    modal.show();
+}
+
+async function performChangeModel() {
+    const modelId = document.getElementById('new-model-select').value;
+
+    if (!modelId) {
+        showToast('Please select a model', 'error');
+        return;
+    }
+
+    try {
+        const formData = new FormData();
+        formData.append('model_id', modelId);
+
+        const response = await fetch(`/api/chat/${conversationId}/command/changemodel`, {
+            method: 'POST',
+            body: formData
+        });
+
+        const data = await response.json();
+
+        if (data.status === 'success') {
+            bootstrap.Modal.getInstance(document.getElementById('changeModelModal')).hide();
+            showToast('Model changed successfully', 'success');
+        }
+    } catch (error) {
+        showToast('Failed to change model', 'error');
+    }
+}
+
+// MCP Audit Log
+async function showMCPAuditModal() {
+    const modalHTML = `
+        <div class="modal fade" id="mcpAuditModal" tabindex="-1">
+            <div class="modal-dialog modal-xl">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title"><i class="bi bi-shield-check"></i> MCP Audit Log</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body" id="mcp-audit-content">
+                        <div class="text-center">
+                            <div class="spinner-border spinner-border-sm" role="status"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Remove old modal if exists
+    const oldModal = document.getElementById('mcpAuditModal');
+    if (oldModal) oldModal.remove();
+
+    document.body.insertAdjacentHTML('beforeend', modalHTML);
+
+    // Load audit log
+    try {
+        const response = await fetch(`/api/chat/${conversationId}/command/mcpaudit`);
+        const data = await response.json();
+
+        const transactions = data.data.transactions;
+
+        let html = '';
+        if (transactions.length === 0) {
+            html = '<p class="text-muted">No MCP transactions recorded</p>';
+        } else {
+            html = `
+                <div class="table-responsive">
+                    <table class="table table-sm table-striped">
+                        <thead>
+                            <tr>
+                                <th>Time</th>
+                                <th>Tool</th>
+                                <th>Server</th>
+                                <th>Status</th>
+                                <th>Exec Time</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+            `;
+
+            transactions.forEach(tx => {
+                const timestamp = new Date(tx.transaction_timestamp).toLocaleString();
+                const status = tx.is_error ? '<span class="badge bg-danger">Error</span>' : '<span class="badge bg-success">Success</span>';
+
+                html += `
+                    <tr>
+                        <td class="small">${timestamp}</td>
+                        <td><code class="small">${escapeHtml(tx.tool_name)}</code></td>
+                        <td class="small">${escapeHtml(tx.tool_server)}</td>
+                        <td>${status}</td>
+                        <td class="small">${tx.execution_time_ms}ms</td>
+                    </tr>
+                `;
+            });
+
+            html += `
+                        </tbody>
+                    </table>
+                </div>
+            `;
+        }
+
+        document.getElementById('mcp-audit-content').innerHTML = html;
+    } catch (error) {
+        document.getElementById('mcp-audit-content').innerHTML = `
+            <div class="alert alert-danger">Failed to load MCP audit log</div>
+        `;
+    }
+
+    const modal = new bootstrap.Modal(document.getElementById('mcpAuditModal'));
+    modal.show();
+}
+
+// MCP Server Management
+async function showMCPServersModal() {
+    const modalHTML = `
+        <div class="modal fade" id="mcpServersModal" tabindex="-1">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title"><i class="bi bi-hdd-network"></i> MCP Server Management</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body" id="mcp-servers-content">
+                        <div class="text-center">
+                            <div class="spinner-border spinner-border-sm" role="status"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Remove old modal if exists
+    const oldModal = document.getElementById('mcpServersModal');
+    if (oldModal) oldModal.remove();
+
+    document.body.insertAdjacentHTML('beforeend', modalHTML);
+
+    // Load server states
+    try {
+        const response = await fetch(`/api/chat/${conversationId}/command/mcpservers`);
+        const data = await response.json();
+
+        const servers = data.data.servers;
+
+        let html = '';
+        if (servers.length === 0) {
+            html = '<p class="text-muted">No MCP servers configured</p>';
+        } else {
+            html = '<div class="list-group">';
+
+            servers.forEach(server => {
+                const enabled = server.enabled;
+                const badge = enabled ?
+                    '<span class="badge bg-success">Enabled</span>' :
+                    '<span class="badge bg-secondary">Disabled</span>';
+
+                html += `
+                    <div class="list-group-item">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <div>
+                                <h6 class="mb-1">${escapeHtml(server.server_name)}</h6>
+                                ${badge}
+                            </div>
+                            <div class="form-check form-switch">
+                                <input
+                                    class="form-check-input"
+                                    type="checkbox"
+                                    id="server-${escapeHtml(server.server_name)}"
+                                    ${enabled ? 'checked' : ''}
+                                    onchange="toggleMCPServer('${escapeHtml(server.server_name)}', this.checked)"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                `;
+            });
+
+            html += '</div>';
+        }
+
+        document.getElementById('mcp-servers-content').innerHTML = html;
+    } catch (error) {
+        document.getElementById('mcp-servers-content').innerHTML = `
+            <div class="alert alert-danger">Failed to load MCP servers</div>
+        `;
+    }
+
+    const modal = new bootstrap.Modal(document.getElementById('mcpServersModal'));
+    modal.show();
+}
+
+async function toggleMCPServer(serverName, enabled) {
+    try {
+        const formData = new FormData();
+        formData.append('server_name', serverName);
+        formData.append('enabled', enabled);
+
+        const response = await fetch(`/api/chat/${conversationId}/command/mcpservers/toggle`, {
+            method: 'POST',
+            body: formData
+        });
+
+        const data = await response.json();
+
+        if (data.status === 'success') {
+            showToast(`Server ${serverName} ${enabled ? 'enabled' : 'disabled'}`, 'success');
+        }
+    } catch (error) {
+        showToast('Failed to toggle server', 'error');
+    }
+}
+
+// Load conversation info
+async function loadConversationInfo() {
+    try {
+        document.getElementById('info-content').innerHTML = `
+            <div class="text-center">
+                <div class="spinner-border spinner-border-sm" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        `;
+
+        const response = await fetch(`/api/chat/${conversationId}/command/info`, {
+            method: 'POST'
+        });
+        const data = await response.json();
+
+        const conv = data.data.conversation;
+        const modelUsage = data.data.model_usage;
+        const rollupSettings = data.data.rollup_settings;
+
+        let infoHTML = `
+            <div class="mb-3">
+                <h6>Conversation Details</h6>
+                <ul class="list-unstyled small">
+                    <li><strong>Name:</strong> ${conv.name}</li>
+                    <li><strong>Model:</strong> <code>${conv.model_id}</code></li>
+                    <li><strong>Created:</strong> ${new Date(conv.created_at).toLocaleString()}</li>
+                    <li><strong>Total Tokens:</strong> ${conv.total_tokens.toLocaleString()}</li>
+                </ul>
+            </div>
+        `;
+
+        if (modelUsage && modelUsage.length > 0) {
+            infoHTML += `
+                <div class="mb-3">
+                    <h6>Model Usage</h6>
+                    <div class="table-responsive">
+                        <table class="table table-sm">
+                            <thead>
+                                <tr>
+                                    <th>Model</th>
+                                    <th>Input</th>
+                                    <th>Output</th>
+                                    <th>Total</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+            `;
+
+            modelUsage.forEach(usage => {
+                infoHTML += `
+                    <tr>
+                        <td><code class="small">${usage.model_id}</code></td>
+                        <td>${usage.input_tokens.toLocaleString()}</td>
+                        <td>${usage.output_tokens.toLocaleString()}</td>
+                        <td>${usage.total_tokens.toLocaleString()}</td>
+                    </tr>
+                `;
+            });
+
+            infoHTML += `
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            `;
+        }
+
+        // Add rollup/compaction settings
+        if (rollupSettings && !rollupSettings.error) {
+            const usagePercent = rollupSettings.context_usage_percent || 0;
+            const compactionThresholdPercent = (rollupSettings.compaction_threshold * 100).toFixed(0);
+            const emergencyThresholdPercent = (rollupSettings.emergency_threshold * 100).toFixed(0);
+
+            // Determine status colour based on usage
+            let statusClass = 'text-success';
+            let statusText = 'Normal';
+            if (usagePercent >= rollupSettings.emergency_threshold * 100) {
+                statusClass = 'text-danger';
+                statusText = 'Emergency';
+            } else if (usagePercent >= rollupSettings.compaction_threshold * 100) {
+                statusClass = 'text-warning';
+                statusText = 'Compaction Due';
+            }
+
+            infoHTML += `
+                <div class="mb-3">
+                    <h6>Context &amp; Rollup Settings</h6>
+                    <div class="small">
+                        <div class="mb-2">
+                            <strong>Context Usage:</strong>
+                            <span class="${statusClass}">${usagePercent}%</span>
+                            <span class="text-muted">(${rollupSettings.current_tokens?.toLocaleString() || 0} / ${rollupSettings.context_window?.toLocaleString() || 0} tokens)</span>
+                            <span class="badge ${statusClass === 'text-success' ? 'bg-success' : statusClass === 'text-warning' ? 'bg-warning text-dark' : 'bg-danger'}">${statusText}</span>
+                        </div>
+                        <div class="progress mb-2" style="height: 8px;">
+                            <div class="progress-bar ${usagePercent >= rollupSettings.emergency_threshold * 100 ? 'bg-danger' : usagePercent >= rollupSettings.compaction_threshold * 100 ? 'bg-warning' : 'bg-success'}"
+                                 role="progressbar"
+                                 style="width: ${Math.min(usagePercent, 100)}%">
+                            </div>
+                            <div class="position-absolute" style="left: ${compactionThresholdPercent}%; width: 2px; height: 8px; background-color: orange; top: 0;"></div>
+                            <div class="position-absolute" style="left: ${emergencyThresholdPercent}%; width: 2px; height: 8px; background-color: red; top: 0;"></div>
+                        </div>
+                        <ul class="list-unstyled mb-0">
+                            <li><strong>Context Window:</strong> ${rollupSettings.context_window?.toLocaleString() || 'Unknown'} tokens</li>
+                            <li><strong>Max Output:</strong> ${rollupSettings.max_output?.toLocaleString() || 'Unknown'} tokens</li>
+                            <li><strong>Compaction Threshold:</strong> ${compactionThresholdPercent}% (${rollupSettings.compaction_trigger_tokens?.toLocaleString() || 0} tokens)</li>
+                            <li><strong>Emergency Threshold:</strong> ${emergencyThresholdPercent}% (${rollupSettings.emergency_trigger_tokens?.toLocaleString() || 0} tokens)</li>
+                            <li><strong>Provider:</strong> ${rollupSettings.provider || 'Unknown'}</li>
+                        </ul>
+                    </div>
+                </div>
+            `;
+        } else if (rollupSettings && rollupSettings.error) {
+            infoHTML += `
+                <div class="mb-3">
+                    <h6>Context &amp; Rollup Settings</h6>
+                    <p class="text-muted small">Unable to load rollup settings: ${rollupSettings.error}</p>
+                </div>
+            `;
+        }
+
+        document.getElementById('info-content').innerHTML = infoHTML;
+
+    } catch (error) {
+        document.getElementById('info-content').innerHTML = `
+            <div class="alert alert-danger">
+                <i class="bi bi-exclamation-triangle-fill"></i> Failed to load conversation info
+            </div>
+        `;
+    }
+}
+
+// Attach files
+function showAttachFilesModal() {
+    const modalHTML = `
+        <div class="modal fade" id="attachFilesModal" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title"><i class="bi bi-paperclip"></i> Attach Files</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label class="form-label">Select files to attach</label>
+                            <input type="file" class="form-control" id="attach-files-input" multiple>
+                            <div class="form-text">
+                                Supported formats: txt, md, json, yaml, yml, xml, csv, log, py, js, ts, java, cpp, c, h
+                            </div>
+                        </div>
+                        <div id="attach-files-list" class="mb-3"></div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-primary" onclick="performAttachFiles()">
+                            <i class="bi bi-paperclip"></i> Attach Files
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Remove old modal if exists
+    const oldModal = document.getElementById('attachFilesModal');
+    if (oldModal) oldModal.remove();
+
+    document.body.insertAdjacentHTML('beforeend', modalHTML);
+
+    // Add file selection change listener
+    const fileInput = document.getElementById('attach-files-input');
+    fileInput.addEventListener('change', function() {
+        const filesList = document.getElementById('attach-files-list');
+        if (this.files.length > 0) {
+            let html = '<div class="alert alert-info"><strong>Selected files:</strong><ul class="mb-0 mt-2">';
+            for (let i = 0; i < this.files.length; i++) {
+                html += `<li>${this.files[i].name} (${(this.files[i].size / 1024).toFixed(2)} KB)</li>`;
+            }
+            html += '</ul></div>';
+            filesList.innerHTML = html;
+        } else {
+            filesList.innerHTML = '';
+        }
+    });
+
+    const modal = new bootstrap.Modal(document.getElementById('attachFilesModal'));
+    modal.show();
+}
+
+async function performAttachFiles() {
+    const fileInput = document.getElementById('attach-files-input');
+
+    if (!fileInput.files || fileInput.files.length === 0) {
+        showToast('Please select at least one file', 'error');
+        return;
+    }
+
+    try {
+        const formData = new FormData();
+
+        // Add all selected files
+        for (let i = 0; i < fileInput.files.length; i++) {
+            formData.append('files', fileInput.files[i]);
+        }
+
+        const response = await fetch(`/api/chat/${conversationId}/command/attach`, {
+            method: 'POST',
+            body: formData
+        });
+
+        const data = await response.json();
+
+        if (data.status === 'success' || data.status === 'partial') {
+            // Close modal
+            bootstrap.Modal.getInstance(document.getElementById('attachFilesModal')).hide();
+
+            // Show success message
+            const message = data.status === 'success'
+                ? `Successfully attached ${data.data.files.length} file(s)`
+                : `${data.message} - Some files may have failed`;
+            showToast(message, data.status === 'success' ? 'success' : 'warning');
+
+            // Reload conversation info to show updated file list
+            await loadConversationInfo();
+        } else {
+            showToast(data.message || 'Failed to attach files', 'error');
+        }
+    } catch (error) {
+        console.error('Error attaching files:', error);
+        showToast('Failed to attach files', 'error');
+    }
+}
+
+function attachFiles() {
+    showAttachFilesModal();
+}
+</script>
+{% endblock %}