You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
7.7 KiB
178 lines
7.7 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI 智能客服 - 对话窗口</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, "Microsoft YaHei", sans-serif;
|
|
background: #f0f2f5;
|
|
display: flex; justify-content: center; align-items: center;
|
|
height: 100vh;
|
|
}
|
|
.chat-container {
|
|
width: 800px; max-width: 95vw; height: 90vh;
|
|
background: #fff; border-radius: 12px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
|
display: flex; flex-direction: column; overflow: hidden;
|
|
}
|
|
.chat-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #fff; padding: 16px 20px;
|
|
font-size: 18px; font-weight: 600;
|
|
}
|
|
.chat-header span { font-size: 13px; opacity: 0.8; margin-left: 8px; }
|
|
.chat-messages {
|
|
flex: 1; overflow-y: auto; padding: 20px;
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
background: #fafbfc;
|
|
}
|
|
.message {
|
|
display: flex; gap: 10px; max-width: 80%;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
|
.message.user { align-self: flex-end; }
|
|
.message.assistant { align-self: flex-start; }
|
|
.avatar {
|
|
width: 36px; height: 36px; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 18px; flex-shrink: 0;
|
|
}
|
|
.message.user .avatar { background: #667eea; }
|
|
.message.assistant .avatar { background: #10b981; }
|
|
.bubble {
|
|
padding: 10px 16px; border-radius: 12px;
|
|
line-height: 1.6; font-size: 14px; word-break: break-word;
|
|
}
|
|
.message.user .bubble { background: #667eea; color: #fff; border-bottom-right-radius: 4px; }
|
|
.message.assistant .bubble { background: #fff; color: #333; border: 1px solid #e8e8e8; border-bottom-left-radius: 4px; }
|
|
.chat-input-area {
|
|
padding: 16px 20px; border-top: 1px solid #eee;
|
|
display: flex; gap: 10px; background: #fff;
|
|
}
|
|
.chat-input-area input {
|
|
flex: 1; padding: 12px 16px;
|
|
border: 1px solid #ddd; border-radius: 24px;
|
|
font-size: 14px; outline: none; transition: border-color 0.3s;
|
|
}
|
|
.chat-input-area input:focus { border-color: #667eea; }
|
|
.chat-input-area button {
|
|
padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #fff; border: none; border-radius: 24px;
|
|
font-size: 14px; cursor: pointer; transition: opacity 0.3s;
|
|
}
|
|
.chat-input-area button:hover { opacity: 0.9; }
|
|
.chat-input-area button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.typing-indicator {
|
|
display: flex; gap: 4px; padding: 10px 16px;
|
|
}
|
|
.typing-indicator span {
|
|
width: 8px; height: 8px; background: #999;
|
|
border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both;
|
|
}
|
|
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
|
|
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
|
|
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
|
|
.info-bar {
|
|
padding: 8px 20px; background: #f0f2f5; font-size: 12px;
|
|
color: #999; display: flex; justify-content: space-between;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="chat-container">
|
|
<div class="chat-header">
|
|
🤖 AI 智能客服<span>基于通义千问 · 支持多轮对话</span>
|
|
</div>
|
|
<div class="info-bar">
|
|
<span>会话ID: <strong id="chatIdDisplay">---</strong></span>
|
|
<span><a href="http://localhost:8080/doc.html" target="_blank" style="color:#667eea;">📖 API文档</a></span>
|
|
</div>
|
|
<div class="chat-messages" id="messages">
|
|
<div class="message assistant">
|
|
<div class="avatar">🤖</div>
|
|
<div class="bubble">
|
|
您好！我是电商智能客服助手，可以帮您解答关于商品、订单、支付、物流和售后等问题。<br>请问有什么可以帮您的？
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-area">
|
|
<input type="text" id="userInput" placeholder="输入您的问题，按回车发送..."
|
|
onkeydown="if(event.key==='Enter') sendMessage()" autofocus>
|
|
<button id="sendBtn" onclick="sendMessage()">发送</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 生成唯一会话 ID
|
|
const chatId = 'web_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6);
|
|
document.getElementById('chatIdDisplay').textContent = chatId;
|
|
|
|
const API_BASE = 'http://localhost:8080';
|
|
|
|
function addMessage(role, content) {
|
|
const div = document.createElement('div');
|
|
div.className = 'message ' + role;
|
|
const avatar = role === 'user' ? '👤' : '🤖';
|
|
if (role === 'user') {
|
|
div.innerHTML = `<div class="bubble">${escapeHtml(content)}</div><div class="avatar">${avatar}</div>`;
|
|
} else {
|
|
div.innerHTML = `<div class="avatar">${avatar}</div><div class="bubble">${escapeHtml(content)}</div>`;
|
|
}
|
|
document.getElementById('messages').appendChild(div);
|
|
document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
|
|
}
|
|
|
|
function addTyping() {
|
|
const div = document.createElement('div');
|
|
div.className = 'message assistant';
|
|
div.id = 'typing-msg';
|
|
div.innerHTML = `<div class="avatar">🤖</div><div class="bubble"><div class="typing-indicator"><span></span><span></span><span></span></div></div>`;
|
|
document.getElementById('messages').appendChild(div);
|
|
document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
|
|
}
|
|
|
|
function removeTyping() {
|
|
const el = document.getElementById('typing-msg');
|
|
if (el) el.remove();
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
}
|
|
|
|
async function sendMessage() {
|
|
const input = document.getElementById('userInput');
|
|
const btn = document.getElementById('sendBtn');
|
|
const message = input.value.trim();
|
|
if (!message) return;
|
|
|
|
input.value = '';
|
|
input.disabled = true;
|
|
btn.disabled = true;
|
|
|
|
addMessage('user', message);
|
|
addTyping();
|
|
|
|
try {
|
|
const url = `${API_BASE}/ai/assistant_app/chat/sync?message=${encodeURIComponent(message)}&chatId=${encodeURIComponent(chatId)}`;
|
|
const res = await fetch(url);
|
|
removeTyping();
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const text = await res.text();
|
|
addMessage('assistant', text);
|
|
} catch (err) {
|
|
removeTyping();
|
|
addMessage('assistant', '抱歉，请求失败：' + err.message + '。请确认后端服务已启动。');
|
|
} finally {
|
|
input.disabled = false;
|
|
btn.disabled = false;
|
|
input.focus();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|