dtSpark 1.0.4__py3-none-any.whl

dtSpark/web/static/js/sse-client.js

@@ -0,0 +1,242 @@
+/**
+ * Server-Sent Events (SSE) client for Spark web interface
+ *
+ * Handles real-time streaming of chat responses via SSE
+ */
+
+/**
+ * Send a message and handle streaming response via SSE
+ * @param {number} conversationId - The conversation ID
+ * @param {string} message - The message to send
+ */
+async function sendMessageWithSSE(conversationId, message) {
+    // Show typing indicator
+    let typingIndicator = showTypingIndicator();
+
+    // Track streaming message element
+    let streamingMessageElement = null;
+    let accumulatedContent = '';
+
+    try {
+        // Create EventSource for SSE
+        const encodedMessage = encodeURIComponent(message);
+        const eventSource = new EventSource(
+            `/api/stream/chat?message=${encodedMessage}&conversation_id=${conversationId}`
+        );
+
+        // Handle different event types
+        eventSource.addEventListener('status', (event) => {
+            const data = JSON.parse(event.data);
+            console.log('Status:', data);
+
+            // Update typing indicator with status
+            if (typingIndicator && typingIndicator.parentNode) {
+                const statusText = data.message || '';
+                typingIndicator.querySelector('.visually-hidden').nextSibling.textContent = statusText;
+            }
+        });
+
+        eventSource.addEventListener('response', (event) => {
+            const data = JSON.parse(event.data);
+            console.log('Received response event:', data);
+
+            // Hide typing indicator on first response
+            if (typingIndicator && typingIndicator.parentNode) {
+                console.log('Hiding typing indicator');
+                hideTypingIndicator();
+                typingIndicator = null;  // Clear reference after hiding
+            }
+
+            if (data.type === 'text') {
+                if (data.final) {
+                    // Final response - this is the main assistant response after tool execution
+                    console.log('Final response received, content length:', data.content ? data.content.length : 0);
+                    accumulatedContent += data.content;
+                    console.log('Accumulated content:', accumulatedContent);
+
+                    // Ensure we have content before displaying
+                    if (accumulatedContent.trim().length > 0) {
+                        streamingMessageElement = updateStreamingMessage(
+                            accumulatedContent,
+                            streamingMessageElement
+                        );
+                        console.log('Updated streaming message element:', streamingMessageElement);
+                    } else {
+                        console.warn('No content to display');
+                    }
+                    eventSource.close();
+                } else {
+                    // Non-final response - text that appears with tool calls
+                    // Display immediately as a separate message
+                    console.log('Non-final response, appending:', data.content);
+                    appendMessage('assistant', data.content);
+                }
+            }
+        });
+
+        eventSource.addEventListener('tool_start', (event) => {
+            const data = JSON.parse(event.data);
+            appendToolCall(data.tool_name, data.input);
+        });
+
+        eventSource.addEventListener('tool_complete', (event) => {
+            const data = JSON.parse(event.data);
+            // Display tool result
+            appendToolResult(data.tool_use_id, { content: data.content });
+        });
+
+        eventSource.addEventListener('tool_error', (event) => {
+            const data = JSON.parse(event.data);
+            appendToolResult(data.tool_name, { error: data.error });
+        });
+
+        eventSource.addEventListener('permission_request', (event) => {
+            const data = JSON.parse(event.data);
+            console.log('Permission request received:', data);
+
+            // Show permission modal/dialog
+            showToolPermissionDialog(data.request_id, data.tool_name, data.tool_description);
+        });
+
+        eventSource.addEventListener('progress', (event) => {
+            const data = JSON.parse(event.data);
+            // Update progress (if we want to show a progress bar)
+            console.log('Progress:', data);
+        });
+
+        eventSource.addEventListener('complete', (event) => {
+            // Stream complete
+            console.log('Stream complete');
+            eventSource.close();
+
+            // Hide typing indicator if still visible
+            if (typingIndicator && typingIndicator.parentNode) {
+                console.log('Hiding typing indicator on complete');
+                hideTypingIndicator();
+                typingIndicator = null;
+            }
+        });
+
+        eventSource.addEventListener('error', (event) => {
+            console.error('SSE error:', event);
+            const data = JSON.parse(event.data);
+
+            // Hide typing indicator
+            if (typingIndicator && typingIndicator.parentNode) {
+                console.log('Hiding typing indicator on error');
+                hideTypingIndicator();
+                typingIndicator = null;
+            }
+
+            // Show error message
+            appendMessage('system', `Error: ${data.message}`);
+
+            eventSource.close();
+        });
+
+        eventSource.onerror = (error) => {
+            console.error('EventSource failed:', error);
+
+            // Hide typing indicator
+            if (typingIndicator && typingIndicator.parentNode) {
+                console.log('Hiding typing indicator on connection error');
+                hideTypingIndicator();
+                typingIndicator = null;
+            }
+
+            // If we haven't received any content, show error
+            if (!streamingMessageElement) {
+                appendMessage('system', 'Connection error. Please try again.');
+            }
+
+            eventSource.close();
+        };
+
+    } catch (error) {
+        console.error('Error sending message:', error);
+
+        // Hide typing indicator
+        if (typingIndicator) {
+            hideTypingIndicator();
+        }
+
+        showToast('Failed to send message', 'error');
+    }
+}
+
+/**
+ * Alternative: Send message using traditional HTTP POST (fallback)
+ * @param {number} conversationId - The conversation ID
+ * @param {string} message - The message to send
+ */
+async function sendMessageHTTP(conversationId, message) {
+    try {
+        // Show typing indicator
+        const typingIndicator = showTypingIndicator();
+
+        // Create form data
+        const formData = new FormData();
+        formData.append('message', message);
+
+        // Send request
+        const response = await fetch(`/api/chat/${conversationId}/message`, {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to send message');
+        }
+
+        const data = await response.json();
+
+        // Hide typing indicator
+        hideTypingIndicator();
+
+        // Append response
+        if (data.status === 'success' && data.response) {
+            appendMessage('assistant', data.response);
+        } else {
+            appendMessage('system', 'No response from assistant');
+        }
+
+    } catch (error) {
+        console.error('Error sending message:', error);
+        hideTypingIndicator();
+        showToast('Failed to send message', 'error');
+    }
+}
+
+/**
+ * Stream progress for a long-running task
+ * @param {string} taskName - The task name
+ * @param {number} totalSteps - Total number of steps
+ * @param {Function} onProgress - Callback for progress updates
+ */
+async function streamProgress(taskName, totalSteps, onProgress) {
+    try {
+        const eventSource = new EventSource(
+            `/api/stream/progress?task_name=${encodeURIComponent(taskName)}&total_steps=${totalSteps}`
+        );
+
+        eventSource.addEventListener('progress', (event) => {
+            const data = JSON.parse(event.data);
+
+            if (onProgress) {
+                onProgress(data);
+            }
+
+            if (data.step >= data.total) {
+                eventSource.close();
+            }
+        });
+
+        eventSource.onerror = (error) => {
+            console.error('Progress stream error:', error);
+            eventSource.close();
+        };
+
+    } catch (error) {
+        console.error('Error streaming progress:', error);
+    }
+}

dtSpark/web/templates/actions.html

@@ -0,0 +1,408 @@
+{% extends "base.html" %}
+
+{% block title %}Autonomous Actions - {{ app_name }}{% endblock %}
+
+{% block content %}
+<div class="container-fluid">
+    <div class="row mb-4">
+        <div class="col">
+            <h2><i class="bi bi-robot"></i> Autonomous Actions</h2>
+            <p class="text-muted">Schedule and manage AI-driven automated tasks</p>
+        </div>
+        <div class="col-auto">
+            <button class="btn btn-outline-primary me-2" onclick="showAICreateModal()">
+                <i class="bi bi-robot"></i> Create with AI
+            </button>
+            <button class="btn btn-primary" onclick="showCreateModal()">
+                <i class="bi bi-plus-circle"></i> Create Action
+            </button>
+        </div>
+    </div>
+
+    <!-- Failed Actions Warning -->
+    <div id="failed-warning" class="alert alert-warning d-none" role="alert">
+        <i class="bi bi-exclamation-triangle-fill"></i>
+        <span id="failed-count-text"></span>
+    </div>
+
+    <!-- Actions Table -->
+    <div class="card">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <span><i class="bi bi-list-task"></i> Actions</span>
+            <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="showDisabled" checked onchange="loadActions()">
+                <label class="form-check-label" for="showDisabled">Show disabled</label>
+            </div>
+        </div>
+        <div class="card-body p-0">
+            <div class="table-responsive">
+                <table class="table table-hover mb-0" id="actions-table">
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Name</th>
+                            <th>Model</th>
+                            <th>Schedule</th>
+                            <th>Context</th>
+                            <th>Status</th>
+                            <th>Last Run</th>
+                            <th>Failures</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="actions-tbody">
+                        <tr>
+                            <td colspan="9" class="text-center text-muted py-4">
+                                <div class="spinner-border spinner-border-sm" role="status"></div>
+                                Loading actions...
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <!-- Recent Runs -->
+    <div class="card mt-4">
+        <div class="card-header">
+            <i class="bi bi-clock-history"></i> Recent Runs
+        </div>
+        <div class="card-body p-0">
+            <div class="table-responsive">
+                <table class="table table-hover mb-0" id="runs-table">
+                    <thead>
+                        <tr>
+                            <th>Run ID</th>
+                            <th>Action</th>
+                            <th>Started</th>
+                            <th>Status</th>
+                            <th>Duration</th>
+                            <th>Tokens</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="runs-tbody">
+                        <tr>
+                            <td colspan="7" class="text-center text-muted py-4">
+                                <div class="spinner-border spinner-border-sm" role="status"></div>
+                                Loading recent runs...
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Create/Edit Action Modal -->
+<div class="modal fade" id="actionModal" tabindex="-1" data-bs-backdrop="static">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="actionModalTitle">Create Action</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <form id="actionForm">
+                    <input type="hidden" id="actionId">
+
+                    <div class="row mb-3">
+                        <div class="col-md-6">
+                            <label for="actionName" class="form-label">Name *</label>
+                            <input type="text" class="form-control" id="actionName" required maxlength="100">
+                        </div>
+                        <div class="col-md-6">
+                            <label for="actionModel" class="form-label">Model *</label>
+                            <select class="form-select" id="actionModel" required>
+                                <option value="">Select a model...</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="actionDescription" class="form-label">Description *</label>
+                        <input type="text" class="form-control" id="actionDescription" required maxlength="500">
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="actionPrompt" class="form-label">Action Prompt *</label>
+                        <textarea class="form-control" id="actionPrompt" rows="5" required
+                            placeholder="Describe the task for the AI to perform..."></textarea>
+                    </div>
+
+                    <div class="row mb-3">
+                        <div class="col-md-4">
+                            <label for="scheduleType" class="form-label">Schedule Type *</label>
+                            <select class="form-select" id="scheduleType" required onchange="updateScheduleConfig()">
+                                <option value="one_off">One-off</option>
+                                <option value="recurring">Recurring</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="contextMode" class="form-label">Context Mode</label>
+                            <select class="form-select" id="contextMode">
+                                <option value="fresh">Fresh (new context each run)</option>
+                                <option value="cumulative">Cumulative (retains context)</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="maxFailures" class="form-label">Max Failures</label>
+                            <input type="number" class="form-control" id="maxFailures" value="3" min="1" max="100">
+                        </div>
+                    </div>
+
+                    <!-- One-off schedule config -->
+                    <div id="oneOffConfig" class="mb-3">
+                        <label for="runDate" class="form-label">Run Date/Time *</label>
+                        <input type="datetime-local" class="form-control" id="runDate">
+                    </div>
+
+                    <!-- Recurring schedule config -->
+                    <div id="recurringConfig" class="mb-3 d-none">
+                        <label for="cronExpression" class="form-label">Cron Expression *</label>
+                        <input type="text" class="form-control" id="cronExpression" placeholder="0 9 * * *">
+                        <div class="form-text">
+                            Examples: <code>0 9 * * *</code> (daily at 9am),
+                            <code>0 9 * * MON</code> (Mondays at 9am),
+                            <code>0 */6 * * *</code> (every 6 hours)
+                        </div>
+                    </div>
+
+                    <!-- Tool Permissions -->
+                    <div class="mb-3">
+                        <label class="form-label">Tool Permissions</label>
+                        <div class="card">
+                            <div class="card-body" style="max-height: 200px; overflow-y: auto;">
+                                <div id="toolPermissions">
+                                    <p class="text-muted mb-0">Loading available tools...</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-text">Select which tools this action can use</div>
+                    </div>
+                </form>
+            </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="saveAction()">
+                    <i class="bi bi-save"></i> Save Action
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- View Action Details Modal -->
+<div class="modal fade" id="viewActionModal" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Action Details</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body" id="viewActionBody">
+                <!-- Populated by JavaScript -->
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Action Runs Modal -->
+<div class="modal fade" id="actionRunsModal" tabindex="-1">
+    <div class="modal-dialog modal-xl">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="actionRunsTitle">Action Runs</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <div class="table-responsive">
+                    <table class="table table-hover">
+                        <thead>
+                            <tr>
+                                <th>Run ID</th>
+                                <th>Started</th>
+                                <th>Completed</th>
+                                <th>Status</th>
+                                <th>Tokens</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="actionRunsTbody">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Run Details Modal -->
+<div class="modal fade" id="runDetailsModal" tabindex="-1">
+    <div class="modal-dialog modal-xl">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Run Details</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body" id="runDetailsBody">
+                <!-- Populated by JavaScript -->
+            </div>
+            <div class="modal-footer">
+                <div class="me-auto">
+                    <button type="button" class="btn btn-outline-secondary" onclick="exportRun('text')">
+                        <i class="bi bi-file-text"></i> Export Text
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary" onclick="exportRun('html')">
+                        <i class="bi bi-filetype-html"></i> Export HTML
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary" onclick="exportRun('markdown')">
+                        <i class="bi bi-markdown"></i> Export Markdown
+                    </button>
+                </div>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Confirm Delete Modal -->
+<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Confirm Delete</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete this action?</p>
+                <p class="text-danger"><strong id="deleteActionName"></strong></p>
+                <p class="text-muted small">This will also delete all run history for this action.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
+                    <i class="bi bi-trash"></i> Delete
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- AI-Assisted Action Creation Modal -->
+<div class="modal fade" id="aiCreateModal" tabindex="-1" data-bs-backdrop="static">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">
+                    <i class="bi bi-robot"></i> Create Action with AI
+                </h5>
+                <button type="button" class="btn-close" onclick="cancelAICreation()"></button>
+            </div>
+            <div class="modal-body">
+                <!-- Initial Setup Form -->
+                <div id="aiCreateSetup">
+                    <p class="text-muted mb-4">
+                        Use AI to help you create an autonomous action through conversation.
+                        The AI will ask questions to understand what you need and configure the action for you.
+                    </p>
+
+                    <div class="mb-3">
+                        <label for="aiActionName" class="form-label">Action Name *</label>
+                        <input type="text" class="form-control" id="aiActionName" required maxlength="100"
+                               placeholder="e.g., Daily Report Generator">
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="aiActionDescription" class="form-label">Description *</label>
+                        <input type="text" class="form-control" id="aiActionDescription" required maxlength="500"
+                               placeholder="Brief description of what this action should do">
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="aiActionModel" class="form-label">Model *</label>
+                        <select class="form-select" id="aiActionModel" required>
+                            <option value="">Select a model...</option>
+                        </select>
+                        <div class="form-text">This model will be used for both creation and execution of the action.</div>
+                    </div>
+
+                    <div class="d-grid">
+                        <button type="button" class="btn btn-primary btn-lg" onclick="startAICreation()">
+                            <i class="bi bi-chat-dots"></i> Start AI-Assisted Creation
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Chat Interface (hidden initially) -->
+                <div id="aiCreateChat" class="d-none">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <div>
+                            <strong id="aiChatActionName"></strong>
+                            <br><small class="text-muted" id="aiChatModelName"></small>
+                        </div>
+                        <span class="badge bg-primary" id="aiChatStatus">In Progress</span>
+                    </div>
+
+                    <!-- Chat Messages -->
+                    <div id="aiChatMessages" class="border rounded p-3 mb-3" style="height: 350px; overflow-y: auto; background-color: var(--bs-gray-100);">
+                        <!-- Messages will be added here dynamically -->
+                    </div>
+
+                    <!-- Chat Input -->
+                    <div id="aiChatInputArea">
+                        <div class="input-group">
+                            <input type="text" class="form-control" id="aiChatInput"
+                                   placeholder="Type your response..."
+                                   onkeypress="handleAIChatKeypress(event)">
+                            <button class="btn btn-primary" type="button" onclick="sendAICreationMessage()">
+                                <i class="bi bi-send"></i> Send
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Completion Message (hidden initially) -->
+                    <div id="aiChatComplete" class="d-none">
+                        <div class="alert alert-success mb-0">
+                            <i class="bi bi-check-circle-fill"></i>
+                            Action created successfully!
+                            <a href="#" id="viewCreatedAction" onclick="viewCreatedAction(); return false;">View action details</a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Loading Indicator -->
+                <div id="aiCreateLoading" class="d-none text-center py-4">
+                    <div class="spinner-border text-primary" role="status"></div>
+                    <p class="mt-2 text-muted">AI is thinking...</p>
+                </div>
+            </div>
+            <div class="modal-footer" id="aiCreateFooter">
+                <button type="button" class="btn btn-secondary" onclick="cancelAICreation()">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="/static/js/actions.js"></script>
+<script>
+    // Initialise page
+    document.addEventListener('DOMContentLoaded', function() {
+        loadActions();
+        loadRecentRuns();
+        loadModels();
+        loadTools();
+        checkFailedActions();
+    });
+</script>
+{% endblock %}