901 lines
30 KiB
JavaScript
901 lines
30 KiB
JavaScript
(() => {
|
||
if (window.__tmAiAssistantLoaded) return;
|
||
window.__tmAiAssistantLoaded = true;
|
||
|
||
const pathname = window.location.pathname || '/';
|
||
const body = document.body;
|
||
const isAssistantEligiblePage = (targetBody) => {
|
||
if (!targetBody) return false;
|
||
if (targetBody.classList.contains('jr-admin-page') || targetBody.classList.contains('jr-admin-login-page')) return false;
|
||
return targetBody.classList.contains('jr-public-page')
|
||
|| targetBody.classList.contains('public-search')
|
||
|| targetBody.classList.contains('jr-order-page')
|
||
|| targetBody.classList.contains('jr-ticket-board-page');
|
||
};
|
||
if (!isAssistantEligiblePage(body)) return;
|
||
|
||
const pageMap = {
|
||
'/': '首页',
|
||
'/home.html': '首页',
|
||
'/order': '线上预定',
|
||
'/ticket-order.html': '线上预定',
|
||
'/search': '车票查询',
|
||
'/ticket-search.html': '车票查询',
|
||
'/ticket-board.html': '车票详情',
|
||
'/token': '订单凭证',
|
||
'/token.html': '订单凭证',
|
||
'/ic-card/order': 'IC 卡线上购卡',
|
||
'/ic-card-order.html': 'IC 卡线上购卡',
|
||
'/ic-card/search': 'IC 卡查询',
|
||
'/ic-card-search.html': 'IC 卡查询'
|
||
};
|
||
|
||
const suggestionMap = {
|
||
'首页': ['这个网站可以做什么？', '如何在线订票？', '凭证码有什么用？'],
|
||
'线上预定': ['如何在线订票？', '订票后怎么兑票？', '车型和乘次数量怎么选？'],
|
||
'车票查询': ['怎么查我的车票？', '票据状态怎么看？', '查不到票据怎么办？'],
|
||
'车票详情': ['帮我解释当前票号。', '这张票现在还能使用吗？', '这些状态字段分别代表什么？'],
|
||
'订单凭证': ['凭证码怎么使用？', '这个凭证现在能兑票吗？', '怎么确认是否已经兑票？'],
|
||
'IC 卡线上购卡': ['怎么在线购买 IC 卡？', '购卡后怎么领卡？', '持卡人姓名有什么要求？'],
|
||
'IC 卡查询': ['怎么查询 IC 卡余额？', '输入什么可以查到 IC 卡？', '卡片状态代表什么？']
|
||
};
|
||
|
||
const resolvePageName = () => {
|
||
if (pageMap[pathname]) return pageMap[pathname];
|
||
if (body.classList.contains('jr-ticket-board-page')) return '车票详情';
|
||
if (body.classList.contains('jr-order-page')) return '线上预定';
|
||
if (document.querySelector('#vCode, #vCodeTop, .jr-redeem-code-value')) return '订单凭证';
|
||
if (document.querySelector('.jr-ticket-id, .jr-route-board')) return '车票详情';
|
||
if (document.querySelector('#q, #searchBtn')) return '车票查询';
|
||
return document.title || '当前页面';
|
||
};
|
||
|
||
const pageName = resolvePageName();
|
||
const history = [];
|
||
let sending = false;
|
||
let lastContextSignature = '';
|
||
|
||
const textOf = (selector) => {
|
||
const el = document.querySelector(selector);
|
||
return el ? String(el.textContent || '').trim() : '';
|
||
};
|
||
|
||
const valueOf = (selector) => {
|
||
const el = document.querySelector(selector);
|
||
return el ? String(el.value || '').trim() : '';
|
||
};
|
||
|
||
const compact = (value, maxLength = 120) => {
|
||
const text = String(value || '').trim().replace(/\s+/g, ' ');
|
||
if (!text) return '';
|
||
return text.length > maxLength ? `${text.slice(0, maxLength)}...` : text;
|
||
};
|
||
|
||
const toContextSignature = (context) => JSON.stringify(context || {});
|
||
const escapeHtml = (value) => String(value || '')
|
||
.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
.replace(/"/g, '"')
|
||
.replace(/'/g, ''');
|
||
|
||
const renderInlineMarkdown = (text) => escapeHtml(text)
|
||
.replace(/`([^`]+)`/g, '<code>$1</code>')
|
||
.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
|
||
.replace(/\*([^*]+)\*/g, '<em>$1</em>')
|
||
.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
|
||
|
||
const markdownToHtml = (source) => {
|
||
const normalized = String(source || '').replace(/\r\n/g, '\n').trim();
|
||
if (!normalized) return '';
|
||
|
||
const codeBlocks = [];
|
||
const withPlaceholders = normalized.replace(/```([\w-]*)\n([\s\S]*?)```/g, (_, lang, code) => {
|
||
const token = `__TM_CODE_BLOCK_${codeBlocks.length}__`;
|
||
codeBlocks.push(
|
||
`<pre class="tm-ai-pre"><code${lang ? ` class="language-${escapeHtml(lang)}"` : ''}>${escapeHtml(code.trim())}</code></pre>`
|
||
);
|
||
return token;
|
||
});
|
||
|
||
const blocks = withPlaceholders.split(/\n{2,}/).map((block) => block.trim()).filter(Boolean);
|
||
const html = blocks.map((block) => {
|
||
if (/^__TM_CODE_BLOCK_\d+__$/.test(block)) {
|
||
const index = Number(block.replace(/\D/g, ''));
|
||
return codeBlocks[index] || '';
|
||
}
|
||
|
||
const lines = block.split('\n').map((line) => line.trimEnd());
|
||
if (lines.every((line) => /^[-*]\s+/.test(line))) {
|
||
return `<ul>${lines.map((line) => `<li>${renderInlineMarkdown(line.replace(/^[-*]\s+/, ''))}</li>`).join('')}</ul>`;
|
||
}
|
||
if (lines.every((line) => /^\d+\.\s+/.test(line))) {
|
||
return `<ol>${lines.map((line) => `<li>${renderInlineMarkdown(line.replace(/^\d+\.\s+/, ''))}</li>`).join('')}</ol>`;
|
||
}
|
||
if (lines.length === 1 && /^###\s+/.test(lines[0])) return `<h3>${renderInlineMarkdown(lines[0].replace(/^###\s+/, ''))}</h3>`;
|
||
if (lines.length === 1 && /^##\s+/.test(lines[0])) return `<h2>${renderInlineMarkdown(lines[0].replace(/^##\s+/, ''))}</h2>`;
|
||
if (lines.length === 1 && /^#\s+/.test(lines[0])) return `<h1>${renderInlineMarkdown(lines[0].replace(/^#\s+/, ''))}</h1>`;
|
||
return `<p>${lines.map((line) => renderInlineMarkdown(line)).join('<br />')}</p>`;
|
||
}).join('');
|
||
|
||
return html.replace(/__TM_CODE_BLOCK_(\d+)__/g, (_, index) => codeBlocks[Number(index)] || '');
|
||
};
|
||
|
||
const buildContextActions = (context) => {
|
||
const actions = [];
|
||
if (context.voucher_code) {
|
||
actions.push({
|
||
label: '解释当前凭证',
|
||
prompt: '请结合当前页面识别到的凭证信息，解释这个凭证现在的状态、如何使用，以及我接下来应该做什么。'
|
||
});
|
||
}
|
||
if (context.ticket_id) {
|
||
actions.push({
|
||
label: '解释当前票号',
|
||
prompt: '请结合当前页面识别到的票号与车票信息，解释这张票当前状态、还能不能使用，以及各字段分别代表什么。'
|
||
});
|
||
}
|
||
if (context.query_keyword && !context.ticket_id && !context.voucher_code) {
|
||
actions.push({
|
||
label: '解释当前检索',
|
||
prompt: `我当前检索的是“${context.query_keyword}”，请告诉我应该如何判断它是票号、凭证码还是其他查询关键词。`
|
||
});
|
||
}
|
||
return actions;
|
||
};
|
||
|
||
const collectPageContext = () => {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const pathSegments = pathname.split('/').filter(Boolean);
|
||
const trailingSegment = decodeURIComponent(pathSegments[pathSegments.length - 1] || '');
|
||
const context = {
|
||
page_name: pageName
|
||
};
|
||
|
||
const fromInput = valueOf('#from');
|
||
const toInput = valueOf('#to');
|
||
const trips = valueOf('#trips');
|
||
const voucherCode = textOf('#vCode') || textOf('#vCodeTop') || textOf('.voucher-code');
|
||
const ticketId = compact(textOf('.jr-ticket-id')) || compact(textOf('.jr-panel-headline .mono')) || compact(params.get('id'));
|
||
const searchKeyword = valueOf('#q') || valueOf('#queryInput') || compact(params.get('q'));
|
||
const status = textOf('#vStatusTop') || textOf('#vStatusTag') || textOf('.jr-status-pill');
|
||
const startName = textOf('.vStartName') || textOf('.jr-route-board .jr-station-block:first-child .jr-station-title');
|
||
const terminalName = textOf('.vTermName') || textOf('.jr-route-board .jr-station-block.is-end .jr-station-title');
|
||
|
||
if (voucherCode) context.voucher_code = voucherCode;
|
||
if (ticketId) context.ticket_id = ticketId.replace(/\s+<.*$/, '').trim();
|
||
if (!context.ticket_id && body.classList.contains('jr-ticket-board-page') && trailingSegment && trailingSegment !== 'search' && trailingSegment !== 'ticket-board.html') {
|
||
context.ticket_id = trailingSegment;
|
||
}
|
||
if (searchKeyword) context.query_keyword = searchKeyword;
|
||
if (status) context.status = status;
|
||
if (startName) context.start = startName;
|
||
if (terminalName) context.terminal = terminalName;
|
||
if (fromInput) context.selected_start = fromInput;
|
||
if (toInput) context.selected_terminal = toInput;
|
||
if (trips) context.trips = trips;
|
||
|
||
if (pathname === '/order' || pathname === '/ticket-order.html') {
|
||
const typeEl = document.querySelector('input[name="trainType"]:checked');
|
||
const typeCardTitle = typeEl ? compact(typeEl.nextElementSibling?.querySelector('.type-title')?.textContent || typeEl.value) : '';
|
||
if (typeCardTitle) context.train_type = typeCardTitle;
|
||
const totalPrice = compact(textOf('.jr-total-amount'));
|
||
if (totalPrice) context.price = totalPrice;
|
||
}
|
||
|
||
if (pathname === '/token' || pathname === '/token.html') {
|
||
const rideDate = textOf('#vDateTop');
|
||
const type = textOf('#vTypeTop');
|
||
const price = textOf('#vPriceTop');
|
||
const voucherHint = textOf('.jr-redeem-copy');
|
||
if (rideDate) context.ride_date = rideDate;
|
||
if (type) context.train_type = type;
|
||
if (price) context.price = price;
|
||
if (voucherHint) context.redeem_tip = compact(voucherHint, 180);
|
||
}
|
||
|
||
if (pathname === '/search' || pathname === '/ticket-search.html' || body.classList.contains('jr-ticket-board-page')) {
|
||
const metaItems = Array.from(document.querySelectorAll('.jr-meta-item')).slice(0, 6);
|
||
metaItems.forEach((item) => {
|
||
const key = compact(item.querySelector('span')?.textContent || '', 40);
|
||
const value = compact(item.querySelector('strong')?.textContent || '', 80);
|
||
if (!key || !value) return;
|
||
if (key.includes('车型')) context.train_type = value;
|
||
if (key.includes('票价')) context.price = value;
|
||
if (key.includes('乘次')) context.trips_summary = value;
|
||
if (key.includes('更新')) context.last_update = value;
|
||
});
|
||
const metaValues = metaItems.map((item) => compact(item.querySelector('strong')?.textContent || '', 80));
|
||
if (!context.train_type && metaValues[0]) context.train_type = metaValues[0];
|
||
if (!context.price && metaValues[1]) context.price = metaValues[1];
|
||
if (!context.trips_summary && metaValues[2]) context.trips_summary = metaValues[2];
|
||
if (!context.last_update && metaValues[3]) context.last_update = metaValues[3];
|
||
}
|
||
|
||
const availableKeys = Object.keys(context).filter((key) => compact(context[key]));
|
||
return availableKeys.length > 1 ? context : { page_name: pageName };
|
||
};
|
||
|
||
const ensureStyle = () => {
|
||
if (document.getElementById('tm-ai-assistant-style')) return;
|
||
const style = document.createElement('style');
|
||
style.id = 'tm-ai-assistant-style';
|
||
style.textContent = `
|
||
.tm-ai-assistant {
|
||
position: fixed;
|
||
right: 22px;
|
||
bottom: 22px;
|
||
z-index: 4200;
|
||
font-family: "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
}
|
||
.tm-ai-toggle {
|
||
min-width: 138px;
|
||
min-height: 50px;
|
||
padding: 9px 12px;
|
||
border: 1px solid #d7e0d3;
|
||
border-top: 3px solid #2b8a57;
|
||
border-radius: 0;
|
||
background: #fbfdf9;
|
||
color: #183525;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
justify-content: flex-start;
|
||
box-shadow: 0 12px 28px rgba(36, 74, 50, 0.1);
|
||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||
}
|
||
.tm-ai-toggle:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 20px 38px rgba(36, 74, 50, 0.14);
|
||
border-color: #cadecd;
|
||
}
|
||
.tm-ai-toggle-badge {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 0;
|
||
background: #2b8a57;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.tm-ai-toggle-copy {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 2px;
|
||
}
|
||
.tm-ai-toggle-copy strong {
|
||
font-size: 13px;
|
||
line-height: 1;
|
||
color: #183525;
|
||
}
|
||
.tm-ai-toggle-copy span {
|
||
font-size: 10px;
|
||
color: #607064;
|
||
}
|
||
.tm-ai-panel {
|
||
width: min(520px, calc(100vw - 24px));
|
||
height: min(780px, calc(100vh - 72px));
|
||
display: none;
|
||
flex-direction: column;
|
||
margin-top: 10px;
|
||
border: 1px solid #d7e0d3;
|
||
border-top: 3px solid #2b8a57;
|
||
border-radius: 0;
|
||
overflow: hidden;
|
||
background: #f9fcf7;
|
||
box-shadow: 0 24px 56px rgba(36, 74, 50, 0.12);
|
||
}
|
||
.tm-ai-assistant.is-open .tm-ai-panel {
|
||
display: flex;
|
||
}
|
||
.tm-ai-header {
|
||
padding: 12px 14px 8px;
|
||
color: #173321;
|
||
background: #fbfdf9;
|
||
border-bottom: 1px solid #dfe8dd;
|
||
}
|
||
.tm-ai-header-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
.tm-ai-agent {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
.tm-ai-agent-avatar {
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 0;
|
||
background: #2b8a57;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 800;
|
||
font-size: 11px;
|
||
color: #ffffff;
|
||
}
|
||
.tm-ai-header-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
.tm-ai-kicker {
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.14em;
|
||
color: #2b8a57;
|
||
}
|
||
.tm-ai-title {
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
color: #183525;
|
||
}
|
||
.tm-ai-subtitle,
|
||
.tm-ai-header-meta {
|
||
font-size: 11px;
|
||
color: #607064;
|
||
}
|
||
.tm-ai-header-meta {
|
||
display: none;
|
||
}
|
||
.tm-ai-close {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1px solid #d7e0d3;
|
||
border-radius: 0;
|
||
background: #ffffff;
|
||
color: #385042;
|
||
cursor: pointer;
|
||
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
|
||
}
|
||
.tm-ai-close:hover {
|
||
background: #f3f8f1;
|
||
border-color: #c6d7c1;
|
||
color: #183525;
|
||
}
|
||
.tm-ai-context {
|
||
margin-top: 8px;
|
||
padding: 8px;
|
||
border-radius: 0;
|
||
background: #f7fbf5;
|
||
border: 1px solid #dbe7d8;
|
||
}
|
||
.tm-ai-context-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.tm-ai-context-title {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
}
|
||
.tm-ai-context-tag {
|
||
padding: 2px 6px;
|
||
border-radius: 0;
|
||
background: #edf6ee;
|
||
color: #2b8a57;
|
||
font-size: 10px;
|
||
}
|
||
.tm-ai-context-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 6px;
|
||
}
|
||
.tm-ai-context-item {
|
||
padding: 6px 8px;
|
||
border-radius: 0;
|
||
background: #ffffff;
|
||
border: 1px solid #e0e9dd;
|
||
}
|
||
.tm-ai-context-item span {
|
||
display: block;
|
||
font-size: 9px;
|
||
letter-spacing: 0.06em;
|
||
color: #6b7c6e;
|
||
}
|
||
.tm-ai-context-item strong {
|
||
display: block;
|
||
margin-top: 2px;
|
||
font-size: 12px;
|
||
line-height: 1.35;
|
||
word-break: break-word;
|
||
color: #173321;
|
||
}
|
||
.tm-ai-context-actions,
|
||
.tm-ai-suggestions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
margin-top: 8px;
|
||
}
|
||
.tm-ai-context-btn,
|
||
.tm-ai-suggestion {
|
||
padding: 6px 10px;
|
||
border-radius: 0;
|
||
border: 1px solid #d5e1d2;
|
||
background: #ffffff;
|
||
color: #355040;
|
||
font-size: 11px;
|
||
cursor: pointer;
|
||
transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
|
||
}
|
||
.tm-ai-context-btn:hover,
|
||
.tm-ai-suggestion:hover {
|
||
background: #f2f8f1;
|
||
border-color: #bfd3ba;
|
||
color: #2b8a57;
|
||
transform: translateY(-1px);
|
||
}
|
||
.tm-ai-suggestions {
|
||
display: none;
|
||
}
|
||
.tm-ai-body {
|
||
flex: 1;
|
||
overflow: auto;
|
||
padding: 14px;
|
||
background: #fcfefb;
|
||
}
|
||
.tm-ai-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.tm-ai-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: flex-end;
|
||
}
|
||
.tm-ai-row-user {
|
||
justify-content: flex-end;
|
||
}
|
||
.tm-ai-bubble-avatar {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
flex-shrink: 0;
|
||
}
|
||
.tm-ai-row-assistant .tm-ai-bubble-avatar {
|
||
background: #edf6ee;
|
||
color: #2b8a57;
|
||
}
|
||
.tm-ai-row-user .tm-ai-bubble-avatar {
|
||
background: #7ca986;
|
||
color: #ffffff;
|
||
order: 2;
|
||
}
|
||
.tm-ai-message {
|
||
max-width: 88%;
|
||
border-radius: 0;
|
||
padding: 10px 12px;
|
||
line-height: 1.68;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
font-size: 13px;
|
||
}
|
||
.tm-ai-message-assistant {
|
||
background: #ffffff;
|
||
color: #223428;
|
||
border: 1px solid #dbe6d8;
|
||
}
|
||
.tm-ai-message-user {
|
||
background: #eef6ee;
|
||
color: #284233;
|
||
border: 1px solid #dbe7d8;
|
||
}
|
||
.tm-ai-message h1,
|
||
.tm-ai-message h2,
|
||
.tm-ai-message h3 {
|
||
margin: 0 0 8px;
|
||
color: inherit;
|
||
line-height: 1.45;
|
||
}
|
||
.tm-ai-message h1 { font-size: 16px; }
|
||
.tm-ai-message h2 { font-size: 15px; }
|
||
.tm-ai-message h3 { font-size: 14px; }
|
||
.tm-ai-message p {
|
||
margin: 0 0 8px;
|
||
}
|
||
.tm-ai-message p:last-child,
|
||
.tm-ai-message ul:last-child,
|
||
.tm-ai-message ol:last-child,
|
||
.tm-ai-message pre:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.tm-ai-message ul,
|
||
.tm-ai-message ol {
|
||
margin: 0 0 8px;
|
||
padding-left: 18px;
|
||
}
|
||
.tm-ai-message li + li {
|
||
margin-top: 4px;
|
||
}
|
||
.tm-ai-message a {
|
||
color: #2f7d55;
|
||
text-decoration: underline;
|
||
}
|
||
.tm-ai-message strong {
|
||
font-weight: 700;
|
||
}
|
||
.tm-ai-message code {
|
||
padding: 1px 5px;
|
||
background: #f1f5ef;
|
||
border: 1px solid #dde7da;
|
||
font-family: Consolas, "Courier New", monospace;
|
||
font-size: 12px;
|
||
}
|
||
.tm-ai-pre {
|
||
margin: 0 0 8px;
|
||
padding: 10px 12px;
|
||
overflow: auto;
|
||
background: #f4f8f2;
|
||
border: 1px solid #dbe6d8;
|
||
}
|
||
.tm-ai-pre code {
|
||
padding: 0;
|
||
border: none;
|
||
background: transparent;
|
||
display: block;
|
||
line-height: 1.55;
|
||
}
|
||
.tm-ai-footer {
|
||
padding: 10px 12px 12px;
|
||
border-top: 1px solid #dfe8dd;
|
||
background: #fbfdf9;
|
||
}
|
||
.tm-ai-status {
|
||
min-height: 14px;
|
||
margin-bottom: 6px;
|
||
color: #647266;
|
||
font-size: 11px;
|
||
}
|
||
.tm-ai-composer {
|
||
border: 1px solid #d6e1d3;
|
||
border-radius: 0;
|
||
background: #ffffff;
|
||
overflow: hidden;
|
||
}
|
||
.tm-ai-input {
|
||
width: 100%;
|
||
min-height: 72px;
|
||
resize: none;
|
||
padding: 10px 12px;
|
||
border: none;
|
||
background: transparent;
|
||
color: #173324;
|
||
outline: none;
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
}
|
||
.tm-ai-composer:focus-within {
|
||
border-color: #2b8a57;
|
||
box-shadow: 0 0 0 3px rgba(43, 138, 87, 0.1);
|
||
}
|
||
.tm-ai-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
padding: 0 10px 10px;
|
||
}
|
||
.tm-ai-hint {
|
||
display: none;
|
||
}
|
||
.tm-ai-send {
|
||
min-width: 86px;
|
||
height: 34px;
|
||
border: none;
|
||
border-radius: 0;
|
||
background: #4a9969;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
font-weight: 700;
|
||
}
|
||
.tm-ai-send[disabled],
|
||
.tm-ai-input[disabled] {
|
||
opacity: 0.65;
|
||
cursor: not-allowed;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.tm-ai-assistant {
|
||
right: 12px;
|
||
left: 12px;
|
||
bottom: 12px;
|
||
}
|
||
.tm-ai-toggle {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
.tm-ai-panel {
|
||
width: 100%;
|
||
height: min(76vh, 720px);
|
||
}
|
||
.tm-ai-context-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
.tm-ai-actions {
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
}
|
||
.tm-ai-send {
|
||
width: auto;
|
||
}
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
};
|
||
|
||
const root = document.createElement('section');
|
||
root.className = 'tm-ai-assistant';
|
||
root.innerHTML = `
|
||
<button type="button" class="tm-ai-toggle" aria-label="打开在线客服">
|
||
<span class="tm-ai-toggle-badge">客</span>
|
||
<span class="tm-ai-toggle-copy">
|
||
<strong>票务客服台</strong>
|
||
<span>咨询订票、票号与凭证</span>
|
||
</span>
|
||
</button>
|
||
<div class="tm-ai-panel" aria-live="polite">
|
||
<div class="tm-ai-header">
|
||
<div class="tm-ai-header-row">
|
||
<div class="tm-ai-agent">
|
||
<div class="tm-ai-agent-avatar">客服</div>
|
||
<div class="tm-ai-header-title">
|
||
<span class="tm-ai-kicker">FSE TICKET SERVICE DESK</span>
|
||
<strong class="tm-ai-title">票务服务台</strong>
|
||
<span class="tm-ai-subtitle">当前页面：${pageName}</span>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="tm-ai-close" aria-label="关闭在线客服">×</button>
|
||
</div>
|
||
<div class="tm-ai-context"></div>
|
||
<div class="tm-ai-suggestions"></div>
|
||
</div>
|
||
<div class="tm-ai-body">
|
||
<div class="tm-ai-list"></div>
|
||
</div>
|
||
<div class="tm-ai-footer">
|
||
<div class="tm-ai-status"></div>
|
||
<div class="tm-ai-composer">
|
||
<textarea class="tm-ai-input" placeholder="例如：帮我解释当前凭证为什么显示可使用？"></textarea>
|
||
<div class="tm-ai-actions">
|
||
<div class="tm-ai-hint">客服会自动读取当前页面中的票号、凭证码和主要票务信息。</div>
|
||
<button type="button" class="tm-ai-send">发送</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
ensureStyle();
|
||
body.appendChild(root);
|
||
|
||
const toggleButton = root.querySelector('.tm-ai-toggle');
|
||
const closeButton = root.querySelector('.tm-ai-close');
|
||
const list = root.querySelector('.tm-ai-list');
|
||
const suggestions = root.querySelector('.tm-ai-suggestions');
|
||
const contextBox = root.querySelector('.tm-ai-context');
|
||
const input = root.querySelector('.tm-ai-input');
|
||
const sendButton = root.querySelector('.tm-ai-send');
|
||
const statusText = root.querySelector('.tm-ai-status');
|
||
const bodyBox = root.querySelector('.tm-ai-body');
|
||
|
||
const renderMessage = (role, text) => {
|
||
const row = document.createElement('div');
|
||
row.className = `tm-ai-row tm-ai-row-${role}`;
|
||
row.innerHTML = `
|
||
<span class="tm-ai-bubble-avatar">${role === 'assistant' ? '服' : '我'}</span>
|
||
<div class="tm-ai-message tm-ai-message-${role}"></div>
|
||
`;
|
||
const messageBox = row.querySelector('.tm-ai-message');
|
||
if (role === 'assistant') messageBox.innerHTML = markdownToHtml(text);
|
||
else messageBox.textContent = text;
|
||
list.appendChild(row);
|
||
bodyBox.scrollTop = bodyBox.scrollHeight;
|
||
};
|
||
|
||
const setStatus = (text) => {
|
||
statusText.textContent = text || '';
|
||
};
|
||
|
||
const pushHistory = (role, text) => {
|
||
history.push({ role, content: text });
|
||
if (history.length > 12) history.splice(0, history.length - 12);
|
||
};
|
||
|
||
const openPanel = () => {
|
||
root.classList.add('is-open');
|
||
refreshContextUI();
|
||
window.setTimeout(() => input.focus(), 20);
|
||
};
|
||
|
||
const closePanel = () => {
|
||
root.classList.remove('is-open');
|
||
};
|
||
|
||
const setSending = (value) => {
|
||
sending = value;
|
||
input.disabled = value;
|
||
sendButton.disabled = value;
|
||
setStatus(value ? '客服正在整理当前页面信息并生成答复...' : '');
|
||
};
|
||
|
||
const sendPreset = (prompt) => {
|
||
input.value = prompt;
|
||
openPanel();
|
||
input.focus();
|
||
};
|
||
|
||
const renderSuggestions = () => {
|
||
const items = suggestionMap[pageName] || suggestionMap['首页'];
|
||
suggestions.innerHTML = '';
|
||
items.forEach((text) => {
|
||
const button = document.createElement('button');
|
||
button.type = 'button';
|
||
button.className = 'tm-ai-suggestion';
|
||
button.textContent = text;
|
||
button.addEventListener('click', () => sendPreset(text));
|
||
suggestions.appendChild(button);
|
||
});
|
||
};
|
||
|
||
const renderContext = (context) => {
|
||
const entries = Object.entries(context || {})
|
||
.filter(([key, value]) => key !== 'page_name' && compact(value))
|
||
.slice(0, 6);
|
||
const actionItems = buildContextActions(context);
|
||
|
||
if (!entries.length) {
|
||
contextBox.innerHTML = `
|
||
<div class="tm-ai-context-head">
|
||
<span class="tm-ai-context-title">当前页面识别</span>
|
||
<span class="tm-ai-context-tag">未识别到票据</span>
|
||
</div>
|
||
<div class="tm-ai-context-item">
|
||
<span>提示</span>
|
||
<strong>客服会在你打开凭证详情、票据详情或输入检索内容后自动读取并辅助解释。</strong>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
const labelMap = {
|
||
voucher_code: '凭证码',
|
||
ticket_id: '票号',
|
||
query_keyword: '检索内容',
|
||
status: '当前状态',
|
||
start: '起点',
|
||
terminal: '终点',
|
||
selected_start: '所选起点',
|
||
selected_terminal: '所选终点',
|
||
trips: '乘次数量',
|
||
train_type: '车型',
|
||
price: '票价',
|
||
ride_date: '乘车日期',
|
||
trips_summary: '乘次信息',
|
||
last_update: '最近更新',
|
||
redeem_tip: '兑票说明'
|
||
};
|
||
|
||
contextBox.innerHTML = `
|
||
<div class="tm-ai-context-head">
|
||
<span class="tm-ai-context-title">当前页面识别</span>
|
||
<span class="tm-ai-context-tag">已同步票务上下文</span>
|
||
</div>
|
||
<div class="tm-ai-context-grid">
|
||
${entries.map(([key, value]) => `
|
||
<div class="tm-ai-context-item">
|
||
<span>${labelMap[key] || key}</span>
|
||
<strong>${compact(value, 80)}</strong>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
${actionItems.length ? `
|
||
<div class="tm-ai-context-actions">
|
||
${actionItems.map((item, index) => `<button type="button" class="tm-ai-context-btn" data-context-action="${index}">${item.label}</button>`).join('')}
|
||
</div>
|
||
` : ''}
|
||
`;
|
||
|
||
Array.from(contextBox.querySelectorAll('[data-context-action]')).forEach((button) => {
|
||
button.addEventListener('click', () => {
|
||
const idx = Number(button.getAttribute('data-context-action'));
|
||
const item = actionItems[idx];
|
||
if (item) sendPreset(item.prompt);
|
||
});
|
||
});
|
||
};
|
||
|
||
const refreshContextUI = () => {
|
||
const context = collectPageContext();
|
||
const signature = toContextSignature(context);
|
||
if (signature === lastContextSignature && contextBox.innerHTML) return;
|
||
lastContextSignature = signature;
|
||
renderContext(context);
|
||
};
|
||
|
||
const sendMessage = async () => {
|
||
const message = String(input.value || '').trim();
|
||
if (!message || sending) return;
|
||
|
||
const requestHistory = history.slice();
|
||
const context = collectPageContext();
|
||
|
||
renderMessage('user', message);
|
||
pushHistory('user', message);
|
||
input.value = '';
|
||
setSending(true);
|
||
|
||
try {
|
||
const response = await fetch('/api/ai-assistant', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
message,
|
||
history: requestHistory,
|
||
page: pageName,
|
||
context
|
||
})
|
||
});
|
||
const data = await response.json().catch(() => ({}));
|
||
if (!response.ok || !data.ok || !data.reply) {
|
||
throw new Error(data.error || '在线客服暂时无法回答，请稍后重试。');
|
||
}
|
||
|
||
renderMessage('assistant', data.reply);
|
||
pushHistory('assistant', data.reply);
|
||
} catch (error) {
|
||
const fallback = error?.message || '在线客服暂时不可用，请稍后重试。';
|
||
renderMessage('assistant', fallback);
|
||
pushHistory('assistant', fallback);
|
||
} finally {
|
||
setSending(false);
|
||
refreshContextUI();
|
||
input.focus();
|
||
}
|
||
};
|
||
|
||
toggleButton.addEventListener('click', () => {
|
||
if (root.classList.contains('is-open')) closePanel();
|
||
else openPanel();
|
||
});
|
||
closeButton.addEventListener('click', closePanel);
|
||
sendButton.addEventListener('click', sendMessage);
|
||
input.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Enter' && !event.shiftKey) {
|
||
event.preventDefault();
|
||
sendMessage();
|
||
} else if (event.key === 'Escape') {
|
||
closePanel();
|
||
}
|
||
});
|
||
|
||
const observer = new MutationObserver(() => {
|
||
window.clearTimeout(observer.__tmTimer);
|
||
observer.__tmTimer = window.setTimeout(refreshContextUI, 180);
|
||
});
|
||
observer.observe(document.body, { childList: true, subtree: true, characterData: true });
|
||
|
||
renderMessage('assistant', `你好，这里是 FSE 票务在线客服。你现在位于“${pageName}”页面，我会自动读取当前票号、凭证码或检索内容，帮你解释状态、使用方法和下一步操作。`);
|
||
pushHistory('assistant', `你好，这里是 FSE 票务在线客服。你现在位于“${pageName}”页面，我会自动读取当前票号、凭证码或检索内容，帮你解释状态、使用方法和下一步操作。`);
|
||
renderSuggestions();
|
||
refreshContextUI();
|
||
})();
|