290 lines
11 KiB
HTML
290 lines
11 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</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
max-width: 800px;
|
||
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);
|
||
}
|
||
.test-section {
|
||
background: #e3f2fd;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 15px 0;
|
||
}
|
||
.result {
|
||
background: #f3e5f5;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
margin: 10px 0;
|
||
white-space: pre-wrap;
|
||
font-family: monospace;
|
||
font-size: 12px;
|
||
}
|
||
.error {
|
||
background: #ffebee;
|
||
color: #c62828;
|
||
}
|
||
.success {
|
||
background: #e8f5e8;
|
||
color: #2e7d32;
|
||
}
|
||
button {
|
||
background: #2196f3;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
margin: 5px;
|
||
}
|
||
button:hover {
|
||
background: #1976d2;
|
||
}
|
||
input[type="text"] {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
margin: 5px 0;
|
||
}
|
||
.chat-log {
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 15px 0;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
border: 1px solid #dee2e6;
|
||
}
|
||
.message {
|
||
margin: 10px 0;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
.message.user {
|
||
background: #007bff;
|
||
color: white;
|
||
text-align: right;
|
||
}
|
||
.message.bot {
|
||
background: #e9ecef;
|
||
color: #333;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🧪 Тест логики Typebot</h1>
|
||
|
||
<div class="test-section">
|
||
<h3>💬 Тест диалога</h3>
|
||
<input type="text" id="testMessage" placeholder="Введите сообщение..." value="Привет">
|
||
<button onclick="sendMessage()">Отправить сообщение</button>
|
||
<button onclick="clearChat()">Очистить чат</button>
|
||
<div id="chatLog" class="chat-log"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>📊 Результаты тестов</h3>
|
||
<div id="testResults" class="result"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let sessionId = null;
|
||
const PROXY_URL = '/aiassist/typebot_proxy.php';
|
||
|
||
function addMessage(text, isUser = false) {
|
||
const chatLog = document.getElementById('chatLog');
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;
|
||
messageDiv.textContent = text;
|
||
chatLog.appendChild(messageDiv);
|
||
chatLog.scrollTop = chatLog.scrollHeight;
|
||
}
|
||
|
||
function logResult(message, isError = false) {
|
||
const resultsDiv = document.getElementById('testResults');
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const logEntry = `[${timestamp}] ${message}\n`;
|
||
resultsDiv.textContent += logEntry;
|
||
|
||
if (isError) {
|
||
resultsDiv.className = 'result error';
|
||
} else {
|
||
resultsDiv.className = 'result success';
|
||
}
|
||
}
|
||
|
||
function clearChat() {
|
||
document.getElementById('chatLog').innerHTML = '';
|
||
sessionId = null;
|
||
logResult('Чат очищен, сессия сброшена');
|
||
}
|
||
|
||
async function sendMessage() {
|
||
const message = document.getElementById('testMessage').value.trim();
|
||
if (!message) {
|
||
alert('Введите сообщение');
|
||
return;
|
||
}
|
||
|
||
addMessage(message, true);
|
||
logResult(`Отправка сообщения: "${message}"`);
|
||
|
||
try {
|
||
const action = sessionId ? 'continueChat' : 'startChat';
|
||
logResult(`Действие: ${action}, SessionId: ${sessionId || 'новый'}`);
|
||
|
||
const response = await fetch(PROXY_URL, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
action: action,
|
||
message: message,
|
||
sessionId: sessionId,
|
||
context: {
|
||
projectId: 'test-123',
|
||
module: 'Test',
|
||
view: 'Test',
|
||
userId: 'test-user'
|
||
}
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
logResult(`Ответ прокси: ${JSON.stringify(result, null, 2)}`);
|
||
|
||
if (result.success) {
|
||
const data = result.data;
|
||
|
||
// Обновляем sessionId если он есть
|
||
if (data.sessionId) {
|
||
sessionId = data.sessionId;
|
||
logResult(`SessionId обновлен: ${sessionId}`);
|
||
}
|
||
|
||
// Обрабатываем сообщения
|
||
if (data.messages && data.messages.length > 0) {
|
||
const lastMessage = data.messages[data.messages.length - 1];
|
||
let messageText = '';
|
||
|
||
if (lastMessage.content && lastMessage.content.richText) {
|
||
// Извлекаем текст из richText массива
|
||
messageText = extractTextFromRichText(lastMessage.content.richText);
|
||
} else {
|
||
messageText = lastMessage.content || 'Получен ответ от бота';
|
||
}
|
||
|
||
addMessage(messageText, false);
|
||
logResult(`Добавлено сообщение бота: "${messageText}"`);
|
||
}
|
||
|
||
// Обрабатываем clientSideActions
|
||
if (data.clientSideActions && data.clientSideActions.length > 0) {
|
||
logResult(`Найдено ${data.clientSideActions.length} clientSideActions`);
|
||
for (const action of data.clientSideActions) {
|
||
if (action.type === 'httpRequestToExecute') {
|
||
logResult(`Выполнение HTTP запроса: ${action.httpRequestToExecute.url}`);
|
||
await executeHttpRequest(action.httpRequestToExecute);
|
||
}
|
||
}
|
||
addMessage('Обрабатываю ваш запрос...', false);
|
||
}
|
||
|
||
// Проверяем input блок
|
||
if (data.input) {
|
||
logResult('Бот ждет ввода пользователя');
|
||
addMessage('Бот ждет ваш ответ...', false);
|
||
}
|
||
|
||
// Если нет сообщений и действий
|
||
if (!data.messages && !data.clientSideActions && !data.input) {
|
||
logResult('Нет сообщений, действий или input блока');
|
||
addMessage('Получен ответ от бота', false);
|
||
}
|
||
|
||
} else {
|
||
logResult(`Ошибка прокси: ${result.error}`, true);
|
||
addMessage('Ошибка: ' + result.error, false);
|
||
}
|
||
|
||
} catch (error) {
|
||
logResult(`Ошибка: ${error.message}`, true);
|
||
addMessage('Ошибка: ' + error.message, false);
|
||
}
|
||
}
|
||
|
||
function extractTextFromRichText(richText) {
|
||
if (!richText || !Array.isArray(richText)) {
|
||
return '';
|
||
}
|
||
|
||
let text = '';
|
||
for (const item of richText) {
|
||
if (item.type === 'p' && item.children) {
|
||
for (const child of item.children) {
|
||
if (child.text) {
|
||
text += child.text;
|
||
}
|
||
}
|
||
text += '\n';
|
||
} else if (item.text) {
|
||
text += item.text;
|
||
}
|
||
}
|
||
|
||
return text.trim();
|
||
}
|
||
|
||
async function executeHttpRequest(httpRequest) {
|
||
try {
|
||
logResult(`Выполнение HTTP запроса: ${httpRequest.url}`);
|
||
|
||
const response = await fetch(httpRequest.url, {
|
||
method: httpRequest.method || 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(httpRequest.body)
|
||
});
|
||
|
||
const result = await response.json();
|
||
logResult(`HTTP запрос выполнен: ${JSON.stringify(result, null, 2)}`);
|
||
|
||
// Если n8n вернул ответ, показываем его
|
||
if (result && result.length > 0 && result[0].output) {
|
||
addMessage(result[0].output, false);
|
||
}
|
||
|
||
return result;
|
||
} catch (error) {
|
||
logResult(`Ошибка HTTP запроса: ${error.message}`, true);
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// Автоматический тест при загрузке
|
||
window.onload = function() {
|
||
logResult('Тест логики Typebot запущен');
|
||
addMessage('Привет! Я тестовый бот. Попробуйте отправить сообщение.', false);
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|