builder.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Telegram Bot Visual Editor</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.css">
  <script src="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="drawflow" style="width: 800px; height: 600px; border: 1px solid black;"></div>

  <script>
    const id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();

    // Добавление узлов
    editor.addNode('StartCommand', 0, 1, 150, 300, 'telegram', { command: '/start', response: 'Привет! Я ваш бот.' });
    editor.addNode('EchoCommand', 0, 1, 400, 300, 'telegram', { response: '{{message}}' });

    // Генерация и отправка кода на сервер
    function generateAndSendPythonCode() {
      const nodes = editor.getNodes();
      let code = '';

      nodes.forEach(node => {
        if (node.data.command) {
          code += `def ${node.data.command.slice(1)}(update: Update, context: CallbackContext) -> None:\n`;
          code += `    update.message.reply_text('${node.data.response}')\n`;
          code += `\n`;
        } else if (node.data.response) {
          code += `def echo(update: Update, context: CallbackContext) -> None:\n`;
          code += `    update.message.reply_text(update.message.text)\n`;
          code += `\n`;
        }
      });

      axios.post('/execute', { command: '/start', code: code })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  </script>
</body>
</html>