272 lines
9.8 KiB
HTML
272 lines
9.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="ru">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Typebot Editor</title>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px;
|
|||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
.bot-info {
|
|||
|
|
background: #e3f2fd;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.bot-structure {
|
|||
|
|
background: #f3e5f5;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.group {
|
|||
|
|
background: #fff3e0;
|
|||
|
|
padding: 10px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
border-left: 4px solid #ff9800;
|
|||
|
|
}
|
|||
|
|
.block {
|
|||
|
|
background: #e8f5e8;
|
|||
|
|
padding: 8px;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
border-left: 3px solid #4caf50;
|
|||
|
|
}
|
|||
|
|
.webhook {
|
|||
|
|
background: #ffebee;
|
|||
|
|
padding: 8px;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
border-left: 3px solid #f44336;
|
|||
|
|
}
|
|||
|
|
.actions {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
background: #2196f3;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin: 5px;
|
|||
|
|
}
|
|||
|
|
button:hover {
|
|||
|
|
background: #1976d2;
|
|||
|
|
}
|
|||
|
|
.test-area {
|
|||
|
|
background: #f9f9f9;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
input[type="text"] {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
margin: 5px 0;
|
|||
|
|
}
|
|||
|
|
.response {
|
|||
|
|
background: #e8f5e8;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<h1>🤖 Typebot Editor - My typebot</h1>
|
|||
|
|
|
|||
|
|
<div class="bot-info">
|
|||
|
|
<h3>📋 Информация о боте</h3>
|
|||
|
|
<p><strong>Название:</strong> My typebot</p>
|
|||
|
|
<p><strong>ID:</strong> cmfi0gfmn0006qj1cklezm06l</p>
|
|||
|
|
<p><strong>Public ID:</strong> my-typebot-lezm06l</p>
|
|||
|
|
<p><strong>Статус:</strong> Опубликован ✅</p>
|
|||
|
|
<p><strong>Последнее обновление:</strong> 2025-09-13T18:12:41.626Z</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="bot-structure">
|
|||
|
|
<h3>🏗️ Структура бота</h3>
|
|||
|
|
|
|||
|
|
<div class="group">
|
|||
|
|
<h4>Group #4 - Приветствие и ввод</h4>
|
|||
|
|
<div class="block">
|
|||
|
|
<strong>Текст:</strong> "Привет"
|
|||
|
|
</div>
|
|||
|
|
<div class="block">
|
|||
|
|
<strong>Поле ввода:</strong> Переменная "input"
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="group">
|
|||
|
|
<h4>Group #3 - Webhook к n8n</h4>
|
|||
|
|
<div class="webhook">
|
|||
|
|
<strong>URL:</strong> https://n8n.clientright.pro/webhook/0b20bf1e-7cda-4dc8-899e-a7c3be4096c0
|
|||
|
|
<br><strong>Тип:</strong> HTTP Request (выполняется на клиенте)
|
|||
|
|
<br><strong>Переменная результата:</strong> "output"
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="group">
|
|||
|
|
<h4>Group #2 - Вывод результата</h4>
|
|||
|
|
<div class="block">
|
|||
|
|
<strong>Текст:</strong> "{{output}}"
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="actions">
|
|||
|
|
<h3>🚀 Действия</h3>
|
|||
|
|
<button onclick="testBot()">🧪 Тестировать бота</button>
|
|||
|
|
<button onclick="getBotInfo()">📊 Обновить информацию</button>
|
|||
|
|
<button onclick="openTypebotStudio()">🎨 Открыть Typebot Studio</button>
|
|||
|
|
<button onclick="exportBot()">📤 Экспортировать бота</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-area">
|
|||
|
|
<h3>🧪 Тестирование бота</h3>
|
|||
|
|
<input type="text" id="testInput" placeholder="Введите тестовое сообщение..." value="Привет, как дела?">
|
|||
|
|
<button onclick="sendTestMessage()">Отправить сообщение</button>
|
|||
|
|
<div id="testResponse" class="response" style="display: none;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const BOT_ID = 'cmfi0gfmn0006qj1cklezm06l';
|
|||
|
|
const PUBLISHED_ID = 'my-typebot-lezm06l';
|
|||
|
|
const API_TOKEN = 'iTTDoxKe0pUwNJ7pNUOEEaO2';
|
|||
|
|
const API_BASE = 'https://typebot.klientprav.tech/api/v1';
|
|||
|
|
|
|||
|
|
async function testBot() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${API_BASE}/typebots/${BOT_ID}`);
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (data.typebot) {
|
|||
|
|
alert('✅ Бот доступен и работает!');
|
|||
|
|
console.log('Bot info:', data.typebot);
|
|||
|
|
} else {
|
|||
|
|
alert('❌ Ошибка получения информации о боте');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
alert('❌ Ошибка: ' + error.message);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function getBotInfo() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${API_BASE}/typebots/${BOT_ID}`, {
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': `Bearer ${API_TOKEN}`
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (data.typebot) {
|
|||
|
|
alert('✅ Информация обновлена! Посмотрите в консоль для деталей.');
|
|||
|
|
console.log('Updated bot info:', data.typebot);
|
|||
|
|
} else {
|
|||
|
|
alert('❌ Ошибка получения информации о боте');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
alert('❌ Ошибка: ' + error.message);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openTypebotStudio() {
|
|||
|
|
window.open(`https://typebot.klientprav.tech/typebots/${BOT_ID}`, '_blank');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function exportBot() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${API_BASE}/typebots/${BOT_ID}`, {
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': `Bearer ${API_TOKEN}`
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (data.typebot) {
|
|||
|
|
const blob = new Blob([JSON.stringify(data.typebot, null, 2)], {type: 'application/json'});
|
|||
|
|
const url = URL.createObjectURL(blob);
|
|||
|
|
const a = document.createElement('a');
|
|||
|
|
a.href = url;
|
|||
|
|
a.download = `typebot-${BOT_ID}.json`;
|
|||
|
|
a.click();
|
|||
|
|
URL.revokeObjectURL(url);
|
|||
|
|
alert('✅ Бот экспортирован!');
|
|||
|
|
} else {
|
|||
|
|
alert('❌ Ошибка экспорта бота');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
alert('❌ Ошибка: ' + error.message);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function sendTestMessage() {
|
|||
|
|
const input = document.getElementById('testInput').value;
|
|||
|
|
const responseDiv = document.getElementById('testResponse');
|
|||
|
|
|
|||
|
|
if (!input.trim()) {
|
|||
|
|
alert('Введите сообщение для тестирования');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
responseDiv.style.display = 'block';
|
|||
|
|
responseDiv.textContent = 'Отправка сообщения...';
|
|||
|
|
|
|||
|
|
// Тестируем через наш прокси
|
|||
|
|
const response = await fetch('/aiassist/typebot_proxy.php', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
action: 'startChat',
|
|||
|
|
message: input,
|
|||
|
|
context: {
|
|||
|
|
userId: 'test-user',
|
|||
|
|
sessionId: 'test-session-' + Date.now()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
responseDiv.textContent = '✅ Ответ бота:\n' + JSON.stringify(result.data, null, 2);
|
|||
|
|
} else {
|
|||
|
|
responseDiv.textContent = '❌ Ошибка: ' + result.error;
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
responseDiv.textContent = '❌ Ошибка: ' + error.message;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Автоматически загружаем информацию о боте при загрузке страницы
|
|||
|
|
window.onload = function() {
|
|||
|
|
console.log('Typebot Editor загружен');
|
|||
|
|
console.log('Bot ID:', BOT_ID);
|
|||
|
|
console.log('Published ID:', PUBLISHED_ID);
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|