需通过后端代理调用智谱清言API，前端维护messages数组管理上下文，用fetch或Axios与后端/chat接口通信，渲染消息时用textContent防XSS，限制历史记录不超过10条且保留system消息。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
把智谱清言API接入网页聊天框，就能在自己的网站上嵌入一个可交互的AI对话窗口，用户无需跳转到chatglm.cn即可直接提问。这要求你既要调用API获取响应，又要用前端代码组织消息流、渲染对话、处理输入提交——不是简单贴个iframe能解决的事。
获取并安全配置API Key
访问智谱AI开放平台（https://open.bigmodel.cn/），登录开发者账号 → 进入「API密钥管理」→ 点击「创建新密钥」→ 复制生成的Key字符串。
【该Key等同于账户密码，绝不可暴露在前端JavaScript中】。必须通过后端代理转发请求，否则任何人打开浏览器开发者工具都能窃取你的Key，导致API额度被盗刷甚至产生费用。
新建一个Python Flask或FastAPI服务，在其路由中封装ZhipuAI SDK调用逻辑，仅暴露/chat接口供前端POST调用。
搭建前端聊天界面（HTML+CSS+JS）
创建index.html文件，插入基础结构：
一个<div id="chat-container">用于容纳所有消息；一个<textarea id="user-input">供用户输入；一个<button id="send-btn">发送按钮；再加一个<div id="loading-indicator">显示“思考中”提示。
为textarea绑定回车提交事件：监听keydown，当e.key === 'Enter'且!e.shiftKey时触发发送，避免换行误触。
给send-btn添加click事件监听器，获取textarea内容 → 清空输入框 → 调用fetch('/chat', {method: 'POST', body: JSON.stringify({message: inputText})}) → 将返回的response.text()追加到chat-container中。
实现前后端通信与消息渲染
方法一：使用原生fetch + Promise链
前端fetch请求需设置Content-Type为application/json，并将用户消息包裹在{message: "..."}对象中；后端接收到后，用ZhipuAI SDK调用glm-4模型，构造符合OpenAI-style格式的response（含role和content字段）；返回时用res.json({reply: content})确保前端能正确解析。
方法二：改用Axios简化错误处理
npm install axios → 在script标签中引入 → 用axios.post('/chat', {message: text})替代fetch，自动解析JSON，catch块统一弹出“网络错误或服务不可用”提示，避免空白响应卡死界面。
每次渲染新消息前，先用DOM操作创建两个<div class="message">：一个加class="user"显示用户输入，一个加class="ai"显示AI回复；用textContent赋值而非innerHTML，防止XSS注入。
处理会话状态与上下文连续性
第一步：在前端维护一个messages数组，初始为[{role: "system", content: "你是一个专业、简洁的助手"}]；每次用户发送后，push({role: "user", content: text})；收到AI回复后，push({role: "assistant", content: reply})。
第二步：每次fetch请求时，将整个messages数组作为payload发送，而非只传最新一条；后端接收后，把全部历史拼成messages参数传给ZhipuAI.chat.completions.create()，确保模型理解上下文。
第三步：为防止数组无限增长拖慢页面，限制messages长度不超过10条（含system），超出时slice(-10)截取最近记录；【注意：截断前必须保留第一条system消息，否则模型行为可能失控】。
第四步：用户点击“清空对话”按钮时，重置messages数组并清空DOM容器，但不重置API调用凭证或后端会话ID（如有）。
