{% extends "base.html" %}
{% set active = "ai" %}
{% block title %}AI助手{% endblock %}
{% block content %}
<div class="header"><h1>🤖 AI 助手</h1></div>
<div class="card ai-chat">
<div class="ai-messages" id="messages">
<div class="ai-msg ai"><div class="bubble">你好！我是HHMB的AI助手。你可以问我任何服务器管理相关的问题，比如：<br><br>• 如何配置Nginx伪静态？<br>• PHP版本如何切换？<br>• MySQL数据库如何优化？<br>• 如何查看服务器负载？</div></div>
</div>
<div class="ai-input">
<input type="text" id="ai-input" placeholder="输入你的问题..." onkeydown="if(event.key==='Enter')sendAI()">
<button class="btn btn-primary" onclick="sendAI()">发送</button>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
var history=[];
function sendAI(){
var input=document.getElementById('ai-input'),text=input.value.trim();
if(!text)return;
input.value='';
history.push({role:'user',content:text});
var msgs=document.getElementById('messages');
msgs.innerHTML+='<div class="ai-msg user"><div class="bubble">'+text+'</div></div>';
msgs.innerHTML+='<div class="ai-msg ai" id="loading"><div class="bubble">思考中...</div></div>';
msgs.scrollTop=msgs.scrollHeight;
post('/api/ai/chat',{messages:history}).then(function(d){
var el=document.getElementById('loading');if(el)el.remove();
var reply=d.reply||'请求失败';
history.push({role:'assistant',content:reply});
msgs.innerHTML+='<div class="ai-msg ai"><div class="bubble">'+reply.replace(/\n/g,'<br>')+'</div></div>';
msgs.scrollTop=msgs.scrollHeight;
}).catch(function(){var el=document.getElementById('loading');if(el)el.remove();msgs.innerHTML+='<div class="ai-msg ai"><div class="bubble">网络错误</div></div>'})}
</script>
{% endblock %}