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