+
Prompt Block ${index + 1}
-
-
-
-
+
+
+
`;
}
@@ -308,61 +463,102 @@ const AgentFormTemplates = {
// Initialize form event listeners
function initAgentFormCommon(options = {}) {
- // Setup event listeners for dynamic component buttons
- if (options.enableConnectors !== false) {
- document.getElementById('addConnectorButton').addEventListener('click', function() {
+ // Add connector button
+ const addConnectorButton = document.getElementById('addConnectorButton');
+ if (addConnectorButton) {
+ addConnectorButton.addEventListener('click', function() {
+ // Create options string
+ let optionsHtml = '';
+ if (options.connectors) {
+ optionsHtml = options.connectors;
+ }
+
+ // Add new connector form
AgentFormUtils.addDynamicComponent('connectorsSection', AgentFormTemplates.connectorTemplate, {
className: 'connector',
- options: options.connectors || ''
+ options: optionsHtml
});
});
}
- if (options.enableMCP !== false) {
- document.getElementById('addMCPButton').addEventListener('click', function() {
+ // Add MCP server button
+ const addMCPButton = document.getElementById('addMCPButton');
+ if (addMCPButton) {
+ addMCPButton.addEventListener('click', function() {
+ // Add new MCP server form
AgentFormUtils.addDynamicComponent('mcpSection', AgentFormTemplates.mcpServerTemplate, {
className: 'mcp_server'
});
});
}
- if (options.enableActions !== false) {
- document.getElementById('action_button').addEventListener('click', function() {
+ // Add action button
+ const actionButton = document.getElementById('action_button');
+ if (actionButton) {
+ actionButton.addEventListener('click', function() {
+ // Create options string
+ let optionsHtml = '';
+ if (options.actions) {
+ optionsHtml = options.actions;
+ }
+
+ // Add new action form
AgentFormUtils.addDynamicComponent('action_box', AgentFormTemplates.actionTemplate, {
className: 'action',
- options: options.actions || ''
+ options: optionsHtml
});
});
}
- if (options.enablePromptBlocks !== false) {
- document.getElementById('dynamic_button').addEventListener('click', function() {
+ // Add prompt block button
+ const dynamicButton = document.getElementById('dynamic_button');
+ if (dynamicButton) {
+ dynamicButton.addEventListener('click', function() {
+ // Create options string
+ let optionsHtml = '';
+ if (options.promptBlocks) {
+ optionsHtml = options.promptBlocks;
+ }
+
+ // Add new prompt block form
AgentFormUtils.addDynamicComponent('dynamic_box', AgentFormTemplates.promptBlockTemplate, {
- className: 'promptBlock',
- options: options.promptBlocks || ''
+ className: 'prompt_block',
+ options: optionsHtml
});
});
}
+}
+
+// Simple toast notification function
+function showToast(message, type) {
+ // Check if toast container exists, if not create it
+ let toast = document.getElementById('toast');
+ if (!toast) {
+ toast = document.createElement('div');
+ toast.id = 'toast';
+ toast.className = 'toast';
+
+ const toastMessage = document.createElement('div');
+ toastMessage.id = 'toast-message';
+ toast.appendChild(toastMessage);
+
+ document.body.appendChild(toast);
+ }
- // Add additional CSS for checkbox labels
- const style = document.createElement('style');
- style.textContent = `
- .checkbox-label {
- display: flex;
- align-items: center;
- cursor: pointer;
- margin-bottom: 10px;
- }
-
- .checkbox-label .checkbox-custom {
- margin-right: 10px;
- }
-
- @keyframes pulse {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.05); }
- 100% { transform: scale(1); }
- }
- `;
- document.head.appendChild(style);
-}
\ No newline at end of file
+ const toastMessage = document.getElementById('toast-message');
+
+ // Set message
+ toastMessage.textContent = message;
+
+ // Set type class
+ toast.className = 'toast';
+ toast.classList.add(`toast-${type}`);
+
+ // Show toast
+ toast.classList.add('show');
+
+ // Hide after 3 seconds
+ setTimeout(() => {
+ toast.classList.remove('show');
+ }, 3000);
+}
diff --git a/webui/public/js/connector-templates.js b/webui/public/js/connector-templates.js
new file mode 100644
index 0000000..f093989
--- /dev/null
+++ b/webui/public/js/connector-templates.js
@@ -0,0 +1,475 @@
+/**
+ * Connector Templates
+ *
+ * This file contains templates for all connector types supported by LocalAgent.
+ * Each template is a function that returns an HTML string for the connector's form.
+ *
+ * Note: We don't need to escape HTML in the value attributes because browsers
+ * handle these values safely when setting them via DOM properties after rendering.
+ */
+
+/**
+ * Connector Templates
+ * Each function takes a config object and returns an HTML string
+ */
+const ConnectorTemplates = {
+ /**
+ * Telegram Connector Template
+ * @param {Object} config - Existing configuration values
+ * @param {Number} index - Connector index
+ * @returns {Object} HTML template and setValues function
+ */
+ telegram: function(config = {}, index) {
+ // Return HTML without values in the template string
+ const html = `
+
+
+
+ Get this from @BotFather on Telegram
+
+ `;
+
+ // Function to set values after HTML is added to DOM to avoid XSS
+ const setValues = function() {
+ const input = document.getElementById(`telegramToken${index}`);
+ if (input) input.value = config.token || '';
+ };
+
+ return { html, setValues };
+ },
+
+ /**
+ * Slack Connector Template
+ * @param {Object} config - Existing configuration values
+ * @param {Number} index - Connector index
+ * @returns {Object} HTML template and setValues function
+ */
+ slack: function(config = {}, index) {
+ // Return HTML without values in the template string
+ const html = `
+
+
+
+ App-level token starting with xapp-
+
+
+
+
+
+ Bot token starting with xoxb-
+
+
+
+
+
+ Channel ID where the bot will operate
+
+
+
+
+
+ If checked, the bot will reply to all messages in the channel
+
+ `;
+
+ // Function to set values after HTML is added to DOM to avoid XSS
+ const setValues = function() {
+ const appTokenInput = document.getElementById(`slackAppToken${index}`);
+ const botTokenInput = document.getElementById(`slackBotToken${index}`);
+ const channelIDInput = document.getElementById(`slackChannelID${index}`);
+ const alwaysReplyInput = document.getElementById(`slackAlwaysReply${index}`);
+
+ if (appTokenInput) appTokenInput.value = config.appToken || '';
+ if (botTokenInput) botTokenInput.value = config.botToken || '';
+ if (channelIDInput) channelIDInput.value = config.channelID || '';
+ if (alwaysReplyInput) alwaysReplyInput.checked = config.alwaysReply === 'true';
+ };
+
+ return { html, setValues };
+ },
+
+ /**
+ * Discord Connector Template
+ * @param {Object} config - Existing configuration values
+ * @param {Number} index - Connector index
+ * @returns {Object} HTML template and setValues function
+ */
+ discord: function(config = {}, index) {
+ // Return HTML without values in the template string
+ const html = `
+
+
+
+
+
+
+
+
+
+ `;
+
+ // Function to set values after HTML is added to DOM
+ const setValues = function() {
+ const tokenInput = document.getElementById(`discordToken${index}`);
+ const channelIDInput = document.getElementById(`discordChannelID${index}`);
+
+ if (tokenInput) tokenInput.value = config.token || '';
+ if (channelIDInput) channelIDInput.value = config.defaultChannel || '';
+ };
+
+ return { html, setValues };
+ },
+
+ /**
+ * GitHub Issues Connector Template
+ * @param {Object} config - Existing configuration values
+ * @param {Number} index - Connector index
+ * @returns {Object} HTML template and setValues function
+ */
+ 'github-issues': function(config = {}, index) {
+ // Return HTML without values in the template string
+ const html = `
+
+
+
+ Needs repo and read:org permissions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ If checked, the bot will reply to issues that have no replies yet
+
+
+
+
+
+ How often to check for new issues (in seconds)
+
+ `;
+
+ // Function to set values after HTML is added to DOM to avoid XSS
+ const setValues = function() {
+ const tokenInput = document.getElementById(`githubIssuesToken${index}`);
+ const ownerInput = document.getElementById(`githubIssuesOwner${index}`);
+ const repoInput = document.getElementById(`githubIssuesRepo${index}`);
+ const replyIfNoRepliesInput = document.getElementById(`githubIssuesReplyIfNoReplies${index}`);
+ const pollIntervalInput = document.getElementById(`githubIssuesPollInterval${index}`);
+
+ if (tokenInput) tokenInput.value = config.token || '';
+ if (ownerInput) ownerInput.value = config.owner || '';
+ if (repoInput) repoInput.value = config.repository || '';
+ if (replyIfNoRepliesInput) replyIfNoRepliesInput.checked = config.replyIfNoReplies === 'true';
+ if (pollIntervalInput) pollIntervalInput.value = config.pollInterval || '60';
+ };
+
+ return { html, setValues };
+ },
+
+ /**
+ * GitHub PRs Connector Template
+ * @param {Object} config - Existing configuration values
+ * @param {Number} index - Connector index
+ * @returns {Object} HTML template and setValues function
+ */
+ 'github-prs': function(config = {}, index) {
+ // Return HTML without values in the template string
+ const html = `
+
+
+
+ Personal Access Token with repo permissions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ If checked, the bot will reply to pull requests that have no replies yet
+
+
+
+
+
+ How often to check for new pull requests (in seconds)
+
+ `;
+
+ // Function to set values after HTML is added to DOM to avoid XSS
+ const setValues = function() {
+ const tokenInput = document.getElementById(`githubPRsToken${index}`);
+ const ownerInput = document.getElementById(`githubPRsOwner${index}`);
+ const repoInput = document.getElementById(`githubPRsRepo${index}`);
+ const replyIfNoRepliesInput = document.getElementById(`githubPRsReplyIfNoReplies${index}`);
+ const pollIntervalInput = document.getElementById(`githubPRsPollInterval${index}`);
+
+ if (tokenInput) tokenInput.value = config.token || '';
+ if (ownerInput) ownerInput.value = config.owner || '';
+ if (repoInput) repoInput.value = config.repository || '';
+ if (replyIfNoRepliesInput) replyIfNoRepliesInput.checked = config.replyIfNoReplies === 'true';
+ if (pollIntervalInput) pollIntervalInput.value = config.pollInterval || '60';
+ };
+
+ return { html, setValues };
+ },
+
+ /**
+ * IRC Connector Template
+ * @param {Object} config - Existing configuration values
+ * @param {Number} index - Connector index
+ * @returns {Object} HTML template and setValues function
+ */
+ irc: function(config = {}, index) {
+ // Return HTML without values in the template string
+ const html = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ If checked, the bot will always reply to messages, even if they are not directed at it
+
+ `;
+
+ // Function to set values after HTML is added to DOM
+ const setValues = function() {
+ const serverInput = document.getElementById(`ircServer${index}`);
+ const portInput = document.getElementById(`ircPort${index}`);
+ const channelInput = document.getElementById(`ircChannel${index}`);
+ const nickInput = document.getElementById(`ircNick${index}`);
+ const alwaysReplyInput = document.getElementById(`ircAlwaysReply${index}`);
+
+ if (serverInput) serverInput.value = config.server || '';
+ if (portInput) portInput.value = config.port || '6667';
+ if (channelInput) channelInput.value = config.channel || '';
+ if (nickInput) nickInput.value = config.nickname || '';
+ if (alwaysReplyInput) alwaysReplyInput.checked = config.alwaysReply === 'true';
+ };
+
+ return { html, setValues };
+ },
+
+ /**
+ * Twitter Connector Template
+ * @param {Object} config - Existing configuration values
+ * @param {Number} index - Connector index
+ * @returns {Object} HTML template and setValues function
+ */
+ twitter: function(config = {}, index) {
+ // Return HTML without values in the template string
+ const html = `
+
+
+
+
+
+
+
+
+ Username of your Twitter bot (with or without @)
+
+
+
+
+
+ If checked, the bot will not enforce Twitter's character limit
+
+ `;
+
+ // Function to set values after HTML is added to DOM
+ const setValues = function() {
+ const tokenInput = document.getElementById(`twitterToken${index}`);
+ const botUsernameInput = document.getElementById(`twitterBotUsername${index}`);
+ const noCharLimitInput = document.getElementById(`twitterNoCharLimit${index}`);
+
+ if (tokenInput) tokenInput.value = config.token || '';
+ if (botUsernameInput) botUsernameInput.value = config.botUsername || '';
+ if (noCharLimitInput) noCharLimitInput.checked = config.noCharacterLimit === 'true';
+ };
+
+ return { html, setValues };
+ },
+
+ /**
+ * Fallback template for any connector without a specific template
+ * @param {Object} config - Existing configuration values
+ * @param {Number} index - Connector index
+ * @returns {Object} HTML template and setValues function
+ */
+ fallback: function(config = {}, index) {
+ // Convert config to a pretty-printed JSON string
+ let configStr = '{}';
+ try {
+ if (typeof config === 'string') {
+ // If it's already a string, try to parse it first to pretty-print
+ configStr = JSON.stringify(JSON.parse(config), null, 2);
+ } else if (typeof config === 'object' && config !== null) {
+ configStr = JSON.stringify(config, null, 2);
+ }
+ } catch (e) {
+ console.error('Error formatting config:', e);
+ // If it's a string but not valid JSON, just use it as is
+ if (typeof config === 'string') {
+ configStr = config;
+ }
+ }
+
+ // Return HTML without values in the template string
+ const html = `
+
+
+
+ Enter the connector configuration as a JSON object
+
+ `;
+
+ // Function to set values after HTML is added to DOM
+ const setValues = function() {
+ const configInput = document.getElementById(`connectorConfig${index}`);
+
+ if (configInput) configInput.value = configStr;
+ };
+
+ return { html, setValues };
+ }
+};
diff --git a/webui/views/create.html b/webui/views/create.html
index b2796ab..95413dc 100644
--- a/webui/views/create.html
+++ b/webui/views/create.html
@@ -5,6 +5,7 @@
{{template "views/partials/header"}}
+
@@ -150,4 +151,4 @@
});
-