开发智能客服 agent

.gitignore

@@ -5,3 +5,4 @@ uploads/
 .DS_Store
 .env
 venv/
+data/conversations/*.json

README.md

@@ -33,6 +33,12 @@ Support Intel Pro 是一个面向现代化客户服务团队的智能工单分
     -   监控坐席（L1/L2/Tech Lead）的实时负载。
     -   自动将新工单分配给负载最低的在线坐席。
 
+5.  **智能客服 Agent（闭环对话）**:
+    -   Web 聊天界面：新建会话、历史会话列表、快捷意图
+    -   对话调用硅基流 OpenAI 兼容接口（默认模型：Qwen2.5-7B-Instruct）
+    -   会话落盘（JSON）+ 导出 + 评分反馈
+    -   本地知识库注入（`data/faq.json` 关键词匹配）
+
 ## 技术栈 (Tech Stack)
 -   **Backend**: Flask (Python)
 -   **Frontend**: Vue 3 + Tailwind CSS
@@ -48,9 +54,17 @@ Support Intel Pro 是一个面向现代化客户服务团队的智能工单分
 pip install -r requirements.txt
 
 # 启动应用
-python app.py
+python3 app.py
 ```
 
+### 环境变量（用于智能客服 Agent）
+
+运行前按需设置：
+
+- `SILICONFLOW_API_KEY`：必填
+- `SILICONFLOW_BASE_URL`：默认 `https://api.siliconflow.cn/v1`
+- `SILICONFLOW_MODEL`：默认 `Qwen/Qwen2.5-7B-Instruct`
+
 ### Docker 运行
 ```bash
 docker build -t support-intel-pro .

app.py

@@ -2,18 +2,36 @@ import os
 import random
 import time
 import json
+import uuid
+import re
+import urllib.request
+import urllib.error
+import ssl
+try:
+    import certifi
+except Exception:
+    certifi = None
 from datetime import datetime, timedelta
-from flask import Flask, render_template, jsonify, request
+from flask import Flask, render_template, jsonify, request, Response
 from faker import Faker
 
 app = Flask(__name__)
 fake = Faker('zh_CN')
 
 # --- Configuration ---
-PORT = 7860
+PORT = int(os.environ.get('PORT', '7860'))
 UPLOAD_FOLDER = 'uploads'
 os.makedirs(UPLOAD_FOLDER, exist_ok=True)
 
+DATA_DIR = os.path.join(os.path.dirname(__file__), 'data')
+CONV_DIR = os.path.join(DATA_DIR, 'conversations')
+FAQ_PATH = os.path.join(DATA_DIR, 'faq.json')
+os.makedirs(CONV_DIR, exist_ok=True)
+
+SILICONFLOW_API_KEY = os.environ.get('SILICONFLOW_API_KEY', '').strip()
+SILICONFLOW_BASE_URL = os.environ.get('SILICONFLOW_BASE_URL', 'https://api.siliconflow.cn/v1').strip().rstrip('/')
+SILICONFLOW_MODEL = os.environ.get('SILICONFLOW_MODEL', 'Qwen/Qwen2.5-7B-Instruct').strip()
+
 # --- In-Memory Data Store ---
 tickets = []
 agents = [
@@ -30,6 +48,158 @@ KEYWORDS_URGENT = ["投诉", "退款", "崩溃", "无法登录", "数据丢失",
 KEYWORDS_BILLING = ["发票", "扣款", "续费", "价格", "支付", "账单"]
 KEYWORDS_TECH = ["API", "Bug", "连接", "延迟", "配置", "代码", "服务器", "数据库"]
 
+def now_iso():
+    return datetime.utcnow().replace(microsecond=0).isoformat() + 'Z'
+
+def normalize_text(s):
+    return re.sub(r'\s+', ' ', str(s or '')).strip()
+
+def safe_title_from_text(s):
+    t = normalize_text(s)
+    if not t:
+        return '新会话'
+    return (t[:24] + '…') if len(t) > 24 else t
+
+def read_json_if_exists(p):
+    try:
+        with open(p, 'r', encoding='utf-8') as f:
+            return json.load(f)
+    except FileNotFoundError:
+        return None
+
+def atomic_write_json(p, data):
+    os.makedirs(os.path.dirname(p), exist_ok=True)
+    tmp = os.path.join(os.path.dirname(p), f'.tmp-{uuid.uuid4().hex}.json')
+    with open(tmp, 'w', encoding='utf-8') as f:
+        json.dump(data, f, ensure_ascii=False, indent=2)
+    os.replace(tmp, p)
+
+def conversation_path(conversation_id):
+    safe = re.sub(r'[^a-zA-Z0-9_-]', '', str(conversation_id or ''))
+    return os.path.join(CONV_DIR, f'{safe}.json')
+
+def load_faq():
+    data = read_json_if_exists(FAQ_PATH)
+    if not data or not isinstance(data, dict):
+        return {'items': []}
+    items = data.get('items')
+    return {'items': items if isinstance(items, list) else []}
+
+FAQ = load_faq()
+
+def tokenize_for_match(s):
+    t = normalize_text(s).lower()
+    if not t:
+        return []
+    raw = [x for x in re.split(r'[^a-z0-9\u4e00-\u9fa5]+', t) if x]
+    uniq = []
+    seen = set()
+    for x in raw:
+        if len(x) < 2:
+            continue
+        if x in seen:
+            continue
+        seen.add(x)
+        uniq.append(x)
+        if len(uniq) >= 30:
+            break
+    return uniq
+
+def score_faq_item(item, tokens):
+    q = str(item.get('q') or '')
+    a = str(item.get('a') or '')
+    tags = item.get('tags') if isinstance(item.get('tags'), list) else []
+    hay = f'{q} {a} {" ".join([str(x) for x in tags])}'.lower()
+    score = 0
+    for tok in tokens:
+        if tok in hay:
+            score += 3 if len(tok) >= 4 else 1
+    return score
+
+def pick_kb_snippets(user_text):
+    tokens = tokenize_for_match(user_text)
+    if not tokens:
+        return []
+    scored = []
+    for it in FAQ.get('items', []):
+        if not isinstance(it, dict):
+            continue
+        s = score_faq_item(it, tokens)
+        if s > 0:
+            scored.append((s, it))
+    scored.sort(key=lambda x: x[0], reverse=True)
+    out = []
+    for _, it in scored[:3]:
+        out.append(f"Q: {normalize_text(it.get('q'))}\nA: {normalize_text(it.get('a'))}")
+    return out
+
+def build_system_prompt(kb_snippets):
+    kb = '\n\n'.join(kb_snippets or [])
+    kb_block = f'\n\n【公司知识库（可引用）】\n{kb}' if kb else ''
+    parts = [
+        '你是一个中文智能客服 Agent，代表「Support Intel Pro 演示公司」与用户对话。',
+        '目标：快速定位问题、给出可执行的解决方案，并在必要时提出澄清问题。',
+        '约束：',
+        '1) 不要编造政策/价格/承诺；知识库没有覆盖时，明确说明“需要进一步确认/转接人工/让用户提供信息”。',
+        '2) 优先输出步骤化的解决方案（用 1、2、3…）。',
+        '3) 涉及账号/订单/隐私信息时，引导用户只提供必要字段（如订单号后 4 位）。',
+        '4) 若用户提及“退款/投诉/发票/物流/售后”，主动收集关键字段并给下一步动作。',
+        kb_block,
+    ]
+    return '\n'.join([p for p in parts if p])
+
+def trim_messages_for_context(messages, max_turns):
+    out = []
+    turns = 0
+    for m in reversed(messages or []):
+        role = m.get('role')
+        content = m.get('content')
+        if role not in ['user', 'assistant'] or not isinstance(content, str):
+            continue
+        out.insert(0, {'role': role, 'content': content})
+        if role == 'user':
+            turns += 1
+        if turns >= max_turns:
+            break
+    return out
+
+def call_siliconflow_chat(api_key, base_url, model, messages, temperature, max_tokens):
+    body = json.dumps({
+        'model': model,
+        'messages': messages,
+        'temperature': temperature,
+        'max_tokens': max_tokens,
+        'stream': False,
+    }).encode('utf-8')
+    req = urllib.request.Request(
+        url=f'{base_url}/chat/completions',
+        data=body,
+        headers={
+            'Content-Type': 'application/json',
+            'Authorization': f'Bearer {api_key}',
+        },
+        method='POST',
+    )
+    ctx = ssl.create_default_context(cafile=certifi.where()) if certifi else ssl.create_default_context()
+    try:
+        with urllib.request.urlopen(req, timeout=60, context=ctx) as resp:
+            raw = resp.read().decode('utf-8')
+            data = json.loads(raw)
+            content = (((data.get('choices') or [{}])[0].get('message') or {}).get('content') or '').strip()
+            usage = data.get('usage')
+            if not content:
+                raise RuntimeError('上游返回为空')
+            return content, usage
+    except urllib.error.HTTPError as e:
+        try:
+            detail = e.read().decode('utf-8')
+        except Exception:
+            detail = str(e)
+        brief = (detail[:500] + '…') if len(detail) > 500 else detail
+        raise RuntimeError(f'上游接口错误：HTTP {e.code}；{brief}')
+    except urllib.error.URLError as e:
+        raise RuntimeError(f'上游连接失败：{e}')
+
 def calculate_sentiment(text):
     """
     Simulate sentiment analysis.
@@ -209,6 +379,168 @@ def resolve_ticket():
             
     return jsonify({"success": False}), 404
 
+@app.route('/api/health')
+def agent_health():
+    return jsonify({
+        'ok': True,
+        'time': now_iso(),
+        'model': SILICONFLOW_MODEL,
+        'baseUrl': SILICONFLOW_BASE_URL,
+        'hasKey': bool(SILICONFLOW_API_KEY),
+    })
+
+@app.route('/api/conversations')
+def list_conversations():
+    items = []
+    for name in os.listdir(CONV_DIR):
+        if not name.endswith('.json'):
+            continue
+        p = os.path.join(CONV_DIR, name)
+        conv = read_json_if_exists(p)
+        if not conv:
+            continue
+        items.append({
+            'id': conv.get('id'),
+            'title': conv.get('title') or '新会话',
+            'updatedAt': conv.get('updatedAt') or conv.get('createdAt'),
+            'createdAt': conv.get('createdAt'),
+        })
+    items.sort(key=lambda x: str(x.get('updatedAt') or ''), reverse=True)
+    return jsonify({'items': items})
+
+@app.route('/api/conversations/<conversation_id>')
+def get_conversation(conversation_id):
+    conv = read_json_if_exists(conversation_path(conversation_id))
+    if not conv:
+        return jsonify({'error': '会话不存在'}), 404
+    return jsonify({'conversation': conv})
+
+@app.route('/api/export/<conversation_id>')
+def export_conversation(conversation_id):
+    conv = read_json_if_exists(conversation_path(conversation_id))
+    if not conv:
+        return jsonify({'error': '会话不存在'}), 404
+    payload = json.dumps(conv, ensure_ascii=False, indent=2)
+    resp = Response(payload, mimetype='application/json; charset=utf-8')
+    resp.headers['Content-Disposition'] = f'attachment; filename="conversation-{conversation_id}.json"'
+    return resp
+
+@app.route('/api/feedback', methods=['POST'])
+def agent_feedback():
+    data = request.json or {}
+    conversation_id = normalize_text(data.get('conversationId'))
+    message_id = normalize_text(data.get('messageId'))
+    rating_raw = data.get('rating')
+    note = normalize_text(data.get('note'))
+    if not conversation_id:
+        return jsonify({'error': 'conversationId 不能为空'}), 400
+    if not message_id:
+        return jsonify({'error': 'messageId 不能为空'}), 400
+    try:
+        rating = int(round(float(rating_raw)))
+    except Exception:
+        return jsonify({'error': 'rating 不能为空'}), 400
+    rating = max(1, min(5, rating))
+    p = conversation_path(conversation_id)
+    conv = read_json_if_exists(p)
+    if not conv:
+        return jsonify({'error': '会话不存在'}), 404
+    feedback = conv.get('feedback')
+    if not isinstance(feedback, list):
+        feedback = []
+    feedback.append({
+        'id': uuid.uuid4().hex,
+        'messageId': message_id,
+        'rating': rating,
+        'note': note,
+        'createdAt': now_iso(),
+    })
+    conv['feedback'] = feedback
+    conv['updatedAt'] = now_iso()
+    atomic_write_json(p, conv)
+    return jsonify({'ok': True})
+
+@app.route('/api/chat', methods=['POST'])
+def agent_chat():
+    data = request.json or {}
+    user_text = normalize_text(data.get('message'))
+    conversation_id_raw = normalize_text(data.get('conversationId'))
+    if not user_text:
+        return jsonify({'error': 'message 不能为空'}), 400
+    if len(user_text) > 4000:
+        return jsonify({'error': 'message 太长（最大 4000 字符）'}), 400
+    if not SILICONFLOW_API_KEY:
+        return jsonify({'error': '未配置 SILICONFLOW_API_KEY（请在环境变量中设置）'}), 500
+
+    conversation_id = conversation_id_raw or str(uuid.uuid4())
+    p = conversation_path(conversation_id)
+    conv = read_json_if_exists(p) or {
+        'id': conversation_id,
+        'title': '新会话',
+        'createdAt': now_iso(),
+        'updatedAt': now_iso(),
+        'messages': [],
+        'meta': {'provider': 'siliconflow', 'model': SILICONFLOW_MODEL},
+    }
+    messages = conv.get('messages')
+    if not isinstance(messages, list):
+        messages = []
+
+    user_msg = {'id': uuid.uuid4().hex, 'role': 'user', 'content': user_text, 'createdAt': now_iso()}
+    messages.append(user_msg)
+    conv['messages'] = messages
+    if conv.get('title') in [None, '', '新会话']:
+        conv['title'] = safe_title_from_text(user_text)
+    conv['updatedAt'] = now_iso()
+
+    kb_snippets = pick_kb_snippets(user_text)
+    system_prompt = build_system_prompt(kb_snippets)
+    history = trim_messages_for_context(messages, 10)
+    upstream_messages = [{'role': 'system', 'content': system_prompt}] + history
+
+    try:
+        temperature_raw = data.get('temperature')
+        max_tokens_raw = data.get('maxTokens')
+        try:
+            temperature = float(temperature_raw) if temperature_raw is not None else 0.4
+        except Exception:
+            temperature = 0.4
+        temperature = max(0.0, min(1.0, temperature))
+
+        try:
+            max_tokens = int(max_tokens_raw) if max_tokens_raw is not None else 1024
+        except Exception:
+            max_tokens = 1024
+        max_tokens = max(64, min(2048, max_tokens))
+
+        content, usage = call_siliconflow_chat(
+            api_key=SILICONFLOW_API_KEY,
+            base_url=SILICONFLOW_BASE_URL,
+            model=SILICONFLOW_MODEL,
+            messages=upstream_messages,
+            temperature=temperature,
+            max_tokens=max_tokens,
+        )
+        assistant_msg = {
+            'id': uuid.uuid4().hex,
+            'role': 'assistant',
+            'content': content,
+            'createdAt': now_iso(),
+            'usage': usage,
+        }
+        messages.append(assistant_msg)
+        conv['messages'] = messages
+        conv['updatedAt'] = now_iso()
+        atomic_write_json(p, conv)
+        return jsonify({
+            'conversationId': conversation_id,
+            'assistantMessage': assistant_msg,
+            'conversation': {'id': conv.get('id'), 'title': conv.get('title'), 'updatedAt': conv.get('updatedAt')},
+        })
+    except Exception as e:
+        atomic_write_json(p, conv)
+        return jsonify({'error': str(e)}), 502
+
 @app.errorhandler(404)
 def page_not_found(e):
     return render_template('index.html'), 404 # SPA fallback mostly

data/conversations/.gitkeep

@@ -0,0 +1 @@
+

data/faq.json

@@ -0,0 +1,25 @@
+{
+  "items": [
+    {
+      "q": "如何查询订单物流？",
+      "a": "请提供订单号后 4 位 + 收货手机号后 4 位。我会帮你查询：1) 当前物流公司与运单号；2) 最新节点；3) 预计送达时间。若超过 48 小时未更新，可发起人工催件。",
+      "tags": ["订单", "物流", "运单", "查询"]
+    },
+    {
+      "q": "退款/退货流程是什么？",
+      "a": "请先确认：1) 订单号后 4 位；2) 是否已签收；3) 退货原因（质量/不喜欢/发错货）。流程：提交申请 → 审核通过 → 生成退货地址与单号 → 仓库签收 → 原路退款。若为质量问题建议先上传照片/视频以便加速处理。",
+      "tags": ["退款", "退货", "售后", "流程"]
+    },
+    {
+      "q": "如何开具发票？",
+      "a": "请提供：抬头类型（个人/企业）、抬头名称、税号（企业必填）、邮箱。我们支持电子发票，通常会在订单完成后生成并发送到邮箱。",
+      "tags": ["发票", "电子发票", "税号"]
+    },
+    {
+      "q": "账号登录不了怎么办？",
+      "a": "请按顺序排查：1) 确认验证码是否过期；2) 切换网络或关闭代理；3) 清理浏览器缓存后重试；4) 仍失败请提供手机号后 4 位 + 错误截图关键提示（可打码）。必要时可发起人工复核。",
+      "tags": ["账号", "登录", "验证码"]
+    }
+  ]
+}
+

templates/index.html

@@ -45,6 +45,10 @@
                         <i class="fa-solid fa-cloud-upload"></i> 上传日志
                     </button>
                     <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden">
+
+                    <button @click="openAgentPanel" class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 shadow-sm">
+                        <i class="fa-solid fa-comments"></i> 智能客服 Agent
+                    </button>
                     
                     <button @click="simulateTraffic" :disabled="isSimulating" 
                         class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
@@ -241,6 +245,110 @@
                 </div>
             </div>
         </main>
+
+        <div v-if="agentOpen" class="fixed inset-0 z-[100]">
+            <div class="absolute inset-0 bg-black/30" @click="closeAgentPanel"></div>
+            <div class="absolute right-0 top-0 h-full w-full max-w-6xl bg-white shadow-2xl flex">
+                <div class="w-80 border-r border-gray-200 bg-gray-50 flex flex-col">
+                    <div class="p-4 border-b border-gray-200 bg-white">
+                        <div class="flex items-start justify-between gap-3">
+                            <div>
+                                <div class="font-bold text-gray-900">智能客服 Agent</div>
+                                <div class="text-xs text-gray-500">硅基流 ${ agentHealth.model || '' }</div>
+                            </div>
+                            <button @click="closeAgentPanel" class="text-gray-400 hover:text-gray-700">
+                                <i class="fa-solid fa-xmark text-lg"></i>
+                            </button>
+                        </div>
+                        <div class="mt-3 flex items-center gap-2 text-xs">
+                            <span :class="['inline-flex items-center gap-2 px-2 py-1 rounded-full border', agentHealth.hasKey ? 'bg-green-50 text-green-700 border-green-200' : 'bg-red-50 text-red-700 border-red-200']">
+                                <span :class="['w-2 h-2 rounded-full', agentHealth.hasKey ? 'bg-green-500' : 'bg-red-500']"></span>
+                                ${ agentHealth.hasKey ? '服务正常' : '缺少 API Key' }
+                            </span>
+                            <span class="text-gray-400">${ agentHealth.baseUrl || '' }</span>
+                        </div>
+                        <button @click="agentNewConversation" class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-plus"></i> 新建会话
+                        </button>
+                    </div>
+
+                    <div class="px-4 pt-4 text-xs text-gray-500 font-medium">历史会话</div>
+                    <div class="p-4 pt-2 overflow-y-auto flex-1 space-y-2">
+                        <button v-for="c in agentConversations" :key="c.id"
+                            @click="agentOpenConversation(c.id)"
+                            :class="['w-full text-left px-3 py-2 rounded-lg border transition-colors', agentConversationId === c.id ? 'bg-indigo-50 border-indigo-200' : 'bg-white border-gray-200 hover:border-indigo-200']">
+                            <div class="text-sm font-semibold text-gray-900 truncate">${ c.title || '新会话' }</div>
+                            <div class="text-xs text-gray-500 mt-1">${ c.updatedAt ? formatAgentTime(c.updatedAt) : '' }</div>
+                        </button>
+                        <div v-if="agentConversations.length === 0" class="text-xs text-gray-400 text-center py-6">
+                            暂无会话记录
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex-1 flex flex-col">
+                    <div class="p-4 border-b border-gray-200 flex items-center justify-between gap-3 bg-white">
+                        <div>
+                            <div class="font-bold text-gray-900">${ agentTitle || '新会话' }</div>
+                            <div class="text-xs text-gray-500">${ agentMeta || '' }</div>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <button @click="agentExport" :disabled="!agentConversationId"
+                                class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
+                                <i class="fa-solid fa-download"></i> 导出 JSON
+                            </button>
+                        </div>
+                    </div>
+
+                    <div ref="agentChatBox" class="flex-1 overflow-y-auto p-5 bg-gray-50">
+                        <div class="max-w-3xl mx-auto space-y-4">
+                            <div v-for="m in agentMessages" :key="m.id" :class="m.role === 'user' ? 'flex justify-end' : 'flex justify-start'">
+                                <div :class="['max-w-[86%] rounded-2xl px-4 py-3 border shadow-sm', m.role === 'user' ? 'bg-indigo-600 text-white border-indigo-500' : 'bg-white text-gray-900 border-gray-200']">
+                                    <div class="whitespace-pre-wrap text-sm leading-relaxed">${ m.content }</div>
+                                    <div class="mt-2 text-[11px] flex items-center justify-between gap-3" :class="m.role === 'user' ? 'text-indigo-100' : 'text-gray-400'">
+                                        <span>${ m.createdAt ? formatAgentTime(m.createdAt) : '' }</span>
+                                        <div v-if="m.role === 'assistant' && m.id && agentConversationId" class="flex items-center gap-1">
+                                            <button v-for="n in 5" :key="n" @click="agentRate(m.id, n)"
+                                                :disabled="!!agentRated[m.id]"
+                                                :class="['w-5 h-5 rounded border flex items-center justify-center text-[10px] transition-colors', agentRated[m.id] ? 'opacity-50 cursor-not-allowed' : 'hover:border-yellow-300', (agentRated[m.id] ? agentRated[m.id] : 0) >= n ? 'bg-yellow-400 border-yellow-400 text-white' : 'bg-white border-gray-200 text-gray-600']">
+                                                <i class="fa-solid fa-star"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-if="agentUsageText" class="max-w-3xl mx-auto text-xs text-gray-400 text-right">
+                                ${ agentUsageText }
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="p-4 border-t border-gray-200 bg-white">
+                        <div class="max-w-3xl mx-auto">
+                            <div class="flex flex-wrap gap-2 mb-3">
+                                <button v-for="q in agentQuickPrompts" :key="q.label" @click="agentFill(q.template)"
+                                    class="text-xs bg-white border border-gray-200 hover:border-indigo-200 text-gray-700 px-3 py-1.5 rounded-full transition-colors">
+                                    ${ q.label }
+                                </button>
+                            </div>
+                            <div class="flex gap-3">
+                                <textarea v-model="agentInput" @keydown.enter.exact.prevent="agentSend" @keydown.enter.shift.exact.stop
+                                    class="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100 focus:border-indigo-300 resize-none"
+                                    rows="2" placeholder="输入你的问题（例如：如何查询订单物流？）"></textarea>
+                                <button @click="agentSend" :disabled="agentSending || !agentInput.trim()"
+                                    class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl text-sm font-medium transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
+                                    <i :class="['fa-solid', agentSending ? 'fa-spinner fa-spin' : 'fa-paper-plane']"></i>
+                                    ${ agentSending ? '发送中' : '发送' }
+                                </button>
+                            </div>
+                            <div class="mt-2 text-xs text-gray-400">
+                                提示：涉及隐私信息时，仅需提供必要字段（如订单号/手机号后 4 位）。
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <script>
@@ -256,6 +364,25 @@
                 const newTicketsCount = ref(0);
                 const fileInput = ref(null);
                 const uploadStatus = ref('');
+
+                const agentOpen = ref(false);
+                const agentHealth = ref({ ok: false, hasKey: false, model: '', baseUrl: '' });
+                const agentConversations = ref([]);
+                const agentConversationId = ref('');
+                const agentMessages = ref([]);
+                const agentInput = ref('');
+                const agentSending = ref(false);
+                const agentTitle = ref('新会话');
+                const agentMeta = ref('');
+                const agentUsageText = ref('');
+                const agentRated = ref({});
+                const agentChatBox = ref(null);
+                const agentQuickPrompts = ref([
+                    { label: '查询物流', template: '我想查询物流，订单号后4位是____，手机号后4位是____。' },
+                    { label: '退款/退货', template: '我想申请退款/退货，订单号后4位是____，原因是____，是否需要提供照片？' },
+                    { label: '开票', template: '我需要开具电子发票：抬头类型____，抬头名称____，税号____，邮箱____。' },
+                    { label: '登录问题', template: '我登录失败，手机号后4位是____，提示错误是____。' }
+                ]);
                 
                 let sentimentChart = null;
                 let priorityChart = null;
@@ -366,6 +493,170 @@
                     return t.split(' ')[1]; // HH:MM:SS
                 };
 
+                const formatAgentTime = (iso) => {
+                    if (!iso) return '';
+                    const d = new Date(iso);
+                    if (Number.isNaN(d.getTime())) return '';
+                    const y = d.getFullYear();
+                    const m = String(d.getMonth() + 1).padStart(2, '0');
+                    const dd = String(d.getDate()).padStart(2, '0');
+                    const hh = String(d.getHours()).padStart(2, '0');
+                    const mm = String(d.getMinutes()).padStart(2, '0');
+                    return `${y}-${m}-${dd} ${hh}:${mm}`;
+                };
+
+                const agentScrollToBottom = async () => {
+                    await nextTick();
+                    if (agentChatBox.value) {
+                        agentChatBox.value.scrollTop = agentChatBox.value.scrollHeight;
+                    }
+                };
+
+                const fetchAgentHealth = async () => {
+                    try {
+                        const res = await fetch('/api/health');
+                        const data = await res.json();
+                        agentHealth.value = data;
+                    } catch {
+                        agentHealth.value = { ok: false, hasKey: false, model: '', baseUrl: '' };
+                    }
+                };
+
+                const fetchAgentConversations = async () => {
+                    try {
+                        const res = await fetch('/api/conversations');
+                        const data = await res.json();
+                        agentConversations.value = data.items || [];
+                    } catch {
+                        agentConversations.value = [];
+                    }
+                };
+
+                const agentNewConversation = async () => {
+                    agentConversationId.value = '';
+                    agentTitle.value = '新会话';
+                    agentMeta.value = '';
+                    agentUsageText.value = '';
+                    agentRated.value = {};
+                    agentMessages.value = [{
+                        id: 'welcome',
+                        role: 'assistant',
+                        content: '你好，我是智能客服 Agent。\\n\\n你可以直接描述问题，或点击下方快捷意图。\\n\\n为了保护隐私，请仅提供必要字段（如订单号/手机号后 4 位）。',
+                        createdAt: new Date().toISOString()
+                    }];
+                    await agentScrollToBottom();
+                };
+
+                const agentOpenConversation = async (id) => {
+                    try {
+                        const res = await fetch(`/api/conversations/${encodeURIComponent(id)}`);
+                        if (!res.ok) return;
+                        const data = await res.json();
+                        const conv = data.conversation;
+                        agentConversationId.value = conv.id;
+                        agentTitle.value = conv.title || '新会话';
+                        agentMeta.value = conv.updatedAt ? `更新：${formatAgentTime(conv.updatedAt)}` : '';
+                        agentUsageText.value = '';
+                        agentRated.value = {};
+                        agentMessages.value = (conv.messages || []).map(m => ({
+                            id: m.id,
+                            role: m.role,
+                            content: m.content,
+                            createdAt: m.createdAt,
+                            usage: m.usage
+                        }));
+                        await agentScrollToBottom();
+                    } finally {
+                        await fetchAgentConversations();
+                    }
+                };
+
+                const agentExport = () => {
+                    if (!agentConversationId.value) return;
+                    const a = document.createElement('a');
+                    a.href = `/api/export/${encodeURIComponent(agentConversationId.value)}`;
+                    a.download = `conversation-${agentConversationId.value}.json`;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                };
+
+                const agentFill = (t) => {
+                    agentInput.value = t;
+                };
+
+                const agentRate = async (messageId, rating) => {
+                    if (!agentConversationId.value) return;
+                    if (agentRated.value[messageId]) return;
+                    agentRated.value = { ...agentRated.value, [messageId]: rating };
+                    const note = window.prompt('可选：补充一句反馈（可留空）', '') ?? '';
+                    try {
+                        await fetch('/api/feedback', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ conversationId: agentConversationId.value, messageId, rating, note })
+                        });
+                    } catch {}
+                };
+
+                const agentSend = async () => {
+                    const text = (agentInput.value || '').trim();
+                    if (!text) return;
+                    agentInput.value = '';
+                    agentUsageText.value = '';
+                    agentMessages.value = [...agentMessages.value, { id: `u-${Date.now()}`, role: 'user', content: text, createdAt: new Date().toISOString() }];
+                    const pendingId = `p-${Date.now()}`;
+                    agentMessages.value = [...agentMessages.value, { id: pendingId, role: 'assistant', content: '正在思考…', createdAt: new Date().toISOString() }];
+                    await agentScrollToBottom();
+                    agentSending.value = true;
+                    try {
+                        const res = await fetch('/api/chat', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ conversationId: agentConversationId.value || undefined, message: text })
+                        });
+                        const data = await res.json();
+                        if (!res.ok) throw new Error(data.error || '请求失败');
+                        agentConversationId.value = data.conversationId;
+                        agentTitle.value = data.conversation?.title || agentTitle.value;
+                        agentMeta.value = data.conversation?.updatedAt ? `更新：${formatAgentTime(data.conversation.updatedAt)}` : '';
+
+                        const usage = data.assistantMessage?.usage;
+                        if (usage) {
+                            agentUsageText.value = `tokens：prompt ${usage.prompt_tokens ?? '-'} / completion ${usage.completion_tokens ?? '-'} / total ${usage.total_tokens ?? '-'}`;
+                        }
+
+                        agentMessages.value = agentMessages.value.map(m => {
+                            if (m.id !== pendingId) return m;
+                            return {
+                                id: data.assistantMessage.id,
+                                role: 'assistant',
+                                content: data.assistantMessage.content,
+                                createdAt: data.assistantMessage.createdAt,
+                                usage: data.assistantMessage.usage
+                            };
+                        });
+                        await fetchAgentConversations();
+                        await agentScrollToBottom();
+                    } catch (e) {
+                        agentMessages.value = agentMessages.value.map(m => m.id === pendingId ? { ...m, content: `请求失败：${String(e?.message || e)}` } : m);
+                        await agentScrollToBottom();
+                    } finally {
+                        agentSending.value = false;
+                    }
+                };
+
+                const openAgentPanel = async () => {
+                    agentOpen.value = true;
+                    await fetchAgentHealth();
+                    await fetchAgentConversations();
+                    if (!agentMessages.value.length) await agentNewConversation();
+                };
+
+                const closeAgentPanel = () => {
+                    agentOpen.value = false;
+                };
+
                 // Charts
                 const initCharts = () => {
                     const chartDom1 = document.getElementById('sentimentChart');
@@ -450,7 +741,10 @@
 
                 return {
                     tickets, stats, isSimulating, currentTime, activeAgents, newTicketsCount, fileInput, uploadStatus,
-                    simulateTraffic, resolveTicket, getPriorityClass, formatTime, triggerUpload, handleFileUpload
+                    simulateTraffic, resolveTicket, getPriorityClass, formatTime, triggerUpload, handleFileUpload,
+                    agentOpen, agentHealth, agentConversations, agentConversationId, agentMessages, agentInput, agentSending,
+                    agentTitle, agentMeta, agentUsageText, agentRated, agentChatBox, agentQuickPrompts,
+                    openAgentPanel, closeAgentPanel, agentNewConversation, agentOpenConversation, agentExport, agentSend, agentFill, agentRate, formatAgentTime
                 };
             }
         }).mount('#app');