373 lines
15 KiB
HTML
373 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="ru">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Тест автоматического запуска</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;
|
|||
|
|
}
|
|||
|
|
.message.system {
|
|||
|
|
background: #fff3cd;
|
|||
|
|
color: #856404;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<h1>🚀 Тест автоматического запуска</h1>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h3>💬 Тест автостарта бота</h3>
|
|||
|
|
<p><strong>Цель:</strong> Проверить, что бот автоматически запускается при открытии чата</p>
|
|||
|
|
|
|||
|
|
<button onclick="initChat()">Открыть чат (автостарт)</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, isSystem = false) {
|
|||
|
|
const chatLog = document.getElementById('chatLog');
|
|||
|
|
const messageDiv = document.createElement('div');
|
|||
|
|
messageDiv.className = `message ${isUser ? 'user' : (isSystem ? 'system' : '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('Чат очищен, сессия сброшена');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getCurrentContext() {
|
|||
|
|
return {
|
|||
|
|
projectId: 'test-123',
|
|||
|
|
module: 'Test',
|
|||
|
|
view: 'Test',
|
|||
|
|
userId: 'test-user'
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function sendToAI(message) {
|
|||
|
|
try {
|
|||
|
|
logResult(`Отправка в AI: "${message}"`);
|
|||
|
|
const context = getCurrentContext();
|
|||
|
|
|
|||
|
|
// Пробуем Typebot
|
|||
|
|
const response = await sendToTypebot(message, context);
|
|||
|
|
return response;
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
logResult(`Ошибка AI: ${error.message}`, true);
|
|||
|
|
return 'Извините, произошла ошибка при отправке сообщения. Попробуйте позже.';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function sendToTypebot(message, context) {
|
|||
|
|
try {
|
|||
|
|
logResult(`Отправка в Typebot: "${message}"`);
|
|||
|
|
|
|||
|
|
// Если это первое сообщение, создаем сессию
|
|||
|
|
if (!sessionId) {
|
|||
|
|
logResult('Создание новой сессии');
|
|||
|
|
const response = await fetch(PROXY_URL, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
action: 'startChat',
|
|||
|
|
message: message,
|
|||
|
|
context: context
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
const data = result.data;
|
|||
|
|
sessionId = data.sessionId;
|
|||
|
|
logResult(`SessionId создан: ${sessionId}`);
|
|||
|
|
|
|||
|
|
// Проверяем, есть ли clientSideActions (webhook к n8n)
|
|||
|
|
if (data.clientSideActions && data.clientSideActions.length > 0) {
|
|||
|
|
logResult(`Найдено ${data.clientSideActions.length} clientSideActions`);
|
|||
|
|
|
|||
|
|
for (const action of data.clientSideActions) {
|
|||
|
|
if (action.type === 'httpRequestToExecute') {
|
|||
|
|
const webhookResult = await executeHttpRequest(action.httpRequestToExecute);
|
|||
|
|
|
|||
|
|
if (webhookResult && webhookResult.length > 0 && webhookResult[0].output) {
|
|||
|
|
logResult(`✅ n8n ответ получен`);
|
|||
|
|
return webhookResult[0].output; // Возвращаем ответ от n8n
|
|||
|
|
} else {
|
|||
|
|
logResult(`❌ n8n не ответил`);
|
|||
|
|
return 'Извините, сервис временно недоступен. Попробуйте позже.';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Обрабатываем сообщения
|
|||
|
|
if (data.messages && data.messages.length > 0) {
|
|||
|
|
const lastMessage = data.messages[data.messages.length - 1];
|
|||
|
|
let messageText = '';
|
|||
|
|
|
|||
|
|
if (lastMessage.content && lastMessage.content.richText) {
|
|||
|
|
messageText = extractTextFromRichText(lastMessage.content.richText);
|
|||
|
|
} else {
|
|||
|
|
messageText = lastMessage.content || '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Пропускаем приветствие
|
|||
|
|
if (messageText.toLowerCase().includes('привет') || messageText.toLowerCase().includes('hello')) {
|
|||
|
|
logResult('Пропускаем приветствие');
|
|||
|
|
return null; // Не показываем приветствие
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return messageText;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return null;
|
|||
|
|
} else {
|
|||
|
|
throw new Error(`Typebot Proxy error: ${result.error}`);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
logResult('Продолжение существующей сессии');
|
|||
|
|
const response = await fetch(PROXY_URL, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
action: 'continueChat',
|
|||
|
|
sessionId: sessionId,
|
|||
|
|
message: message,
|
|||
|
|
context: context
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
const data = result.data;
|
|||
|
|
|
|||
|
|
// Проверяем, есть ли clientSideActions (webhook к n8n)
|
|||
|
|
if (data.clientSideActions && data.clientSideActions.length > 0) {
|
|||
|
|
for (const action of data.clientSideActions) {
|
|||
|
|
if (action.type === 'httpRequestToExecute') {
|
|||
|
|
const webhookResult = await executeHttpRequest(action.httpRequestToExecute);
|
|||
|
|
|
|||
|
|
if (webhookResult && webhookResult.length > 0 && webhookResult[0].output) {
|
|||
|
|
return webhookResult[0].output;
|
|||
|
|
} else {
|
|||
|
|
return 'Извините, сервис временно недоступен. Попробуйте позже.';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Обрабатываем сообщения
|
|||
|
|
if (data.messages && data.messages.length > 0) {
|
|||
|
|
const lastMessage = data.messages[data.messages.length - 1];
|
|||
|
|
let messageText = '';
|
|||
|
|
|
|||
|
|
if (lastMessage.content && lastMessage.content.richText) {
|
|||
|
|
messageText = extractTextFromRichText(lastMessage.content.richText);
|
|||
|
|
} else {
|
|||
|
|
messageText = lastMessage.content || '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return messageText;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return null;
|
|||
|
|
} else {
|
|||
|
|
throw new Error(`Typebot Proxy error: ${result.error}`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
logResult(`Ошибка Typebot: ${error.message}`, true);
|
|||
|
|
throw error;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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 запрос выполнен`);
|
|||
|
|
|
|||
|
|
return result;
|
|||
|
|
} catch (error) {
|
|||
|
|
logResult(`Ошибка HTTP запроса: ${error.message}`, true);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function initChat() {
|
|||
|
|
logResult('Инициализация чата...');
|
|||
|
|
|
|||
|
|
// Добавляем приветственное сообщение
|
|||
|
|
addMessage('Привет! Я AI ассистент вашей CRM системы. Задавайте любые вопросы - я сразу на них отвечу!', false);
|
|||
|
|
|
|||
|
|
// Автоматически запускаем бота
|
|||
|
|
try {
|
|||
|
|
logResult('Автостарт бота...');
|
|||
|
|
const context = getCurrentContext();
|
|||
|
|
const response = await sendToAI('Привет, я готов к работе!');
|
|||
|
|
|
|||
|
|
if (response && response !== null) {
|
|||
|
|
addMessage(response, false);
|
|||
|
|
logResult('✅ Бот автостарт успешен');
|
|||
|
|
} else {
|
|||
|
|
logResult('✅ Бот автостарт (нет ответа для показа)');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
logResult(`❌ Ошибка автостарта: ${error.message}`, true);
|
|||
|
|
addMessage('Бот готов к работе! Задавайте вопросы.', false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Автоматический тест при загрузке
|
|||
|
|
window.onload = function() {
|
|||
|
|
logResult('Тест автоматического запуска готов');
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|