ai-kefu-admin/static/chat.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>AI Support</title>
    <script>
    (function () {
        /* spec 2026-10-19 §4:路径前缀模式(/t/<slug>/)按当前地址推导基础路径;
           Host 模式(根路径 "/")推导为空串——全部引用零变化。
           拼接安全:match 命中即字符集白名单([a-z0-9-]),base 只做 URL 属性
           赋值,绝不拼 HTML(防线 §2/§3);找不到标记(如 /admin 域)同样得空串。 */
        var m = location.pathname.match(/^\/t\/[a-z0-9-]+\/$/);
        var base = m ? location.pathname.slice(0, -1) : "";
        window.__BASE_PATH__ = base;
        function css(href) {
            var l = document.createElement("link");
            l.rel = "stylesheet"; l.href = base + href;
            document.head.appendChild(l);
        }
        function js(src) {
            var s = document.createElement("script");
            s.src = base + src; s.async = false; /* 保序:theme 先于 chat */
            document.head.appendChild(s);
        }
        css("/static/css/style.css");
        document.addEventListener("DOMContentLoaded", function () {
            /* js 装载放 DOMContentLoaded:head 动态插入的 async=false 脚本与
               解析进度无形式化顺序保证,且 chat.js 顶层有同步 DOM 查询——
               DOM 就绪后装载与原 body 末尾形态等价且保序 */
            js("/static/js/theme.js");
            js("/static/js/chat.js");
            var img = document.querySelector(".avatar-img");
            if (img) img.src = base + "/api/public/avatar";
        });
    })();
    </script>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <div class="avatar"><span class="avatar-emoji">🤖</span><img class="avatar-img" alt=""></div>
            <div class="info">
                <h1>AI Support</h1>
                <div class="availability">Online now - Usually replies in minutes</div>
            </div>
            <!-- <div class="actions">
                <button class="action-btn" aria-label="Minimize">−</button>
                <button class="action-btn" aria-label="Close">×</button>
            </div> -->
        </div>

        <div class="chat-ended" id="chatEnded">
            Chat ended. We'll be in touch soon!
        </div>
        <div class="panel-top">
          <!-- How can we help? 区块 -->
          <div class="help-block">
            <div style="display:flex;align-items:center;gap:14px;">
              <div class="help-content">
                <div class="help-title">How can we help?</div>
                <div class="help-description">Ask about products, quotations, MOQ, shipping and delivery.</div>
              </div>
              <div class="help-actions">
                <!-- Task 10: 联系按钮/标题/欢迎语/话题/隐私链接由 chat.js 从
                     /api/public/brand 填充(值缺位隐藏),出厂不再内嵌租户品牌 -->
                <a target="_blank" rel="noopener" class="call-btn whatsapp-btn">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                  <span>WhatsApp</span>
                </a>
                <a class="call-btn email-btn">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                  <span>Email</span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="chat-separator"></div>
        <div class="chat-messages" id="messages">
            <div class="message assistant">
                <div class="bubble"></div>
            </div>
        </div>

        <div class="typing-indicator" id="typing">
            <span></span><span></span><span></span>
        </div>

        <!-- POPULAR TOPICS 区块(按钮由 chat.js 按 brand.topics 生成) -->
        <div class="popular-topics-fixed" id="popular-topics">
          <div class="popular-topics-label">POPULAR TOPICS</div>
          <div class="popular-topics-grid"></div>
        </div>
        <div class="chat-separator-topics"></div>

        <div class="chat-input-container">
          <div class="input-wrapper">
            <input id="input" type="text" placeholder="Type a message..." autocomplete="off">
            <button id="sendBtn" class="send-btn" aria-label="Send message">
              <span class="send-icon">➤</span>
              <span class="send-text">Send</span>
            </button>
          </div>
        </div>
        <div class="chat-footer"><span class="footer-left">By chatting, you agree to our <a target="_blank" rel="noopener">privacy policy</a>.</span></div>
    </div>
</body>
</html>