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>
|