auto_agent/src/web/index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>minor · Chatbot</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" href="/image/favicon.svg" sizes="any" />
    <link rel="stylesheet" href="/app.css" />
  </head>
  <body>
    <div class="bg-scene" id="bgScene" aria-hidden="true">
      <div class="bg-image" id="bgImageLayer"></div>
      <div class="bg-vignette" aria-hidden="true"></div>
    </div>
    <div class="app-root" id="app">
      <div class="drawer-backdrop" id="drawerBackdrop" aria-hidden="true"></div>
      <aside class="expand-rail" id="expandRail" aria-hidden="true">
        <button type="button" class="rail-btn" id="expandBtn" title="展开侧栏">⟩</button>
      </aside>
      <aside class="sidebar" id="sidebar">
        <div class="sidebar-head">
          <h2 class="sidebar-title">会话</h2>
          <button type="button" class="btn btn-primary" id="newSessionBtn">＋ 新建会话</button>
          <button type="button" class="btn btn-danger" id="deleteSessionBtn">删除会话</button>
        </div>
        <div class="sidebar-list-wrap">
          <ul class="session-list" id="sessionList" role="listbox" aria-label="会话列表"></ul>
        </div>
        <p class="sidebar-hint">点击切换会话；新建为秒级时间 ID。</p>
        <div class="sidebar-bg-panel" aria-label="背景与景深">
          <p class="sidebar-bg-title">页面背景</p>
          <label class="bg-control">
            <span class="bg-control-label">景深模糊</span>
            <input type="range" id="dofRange" min="0" max="24" value="0" step="0.5" />
            <span class="bg-control-value" id="dofValue">0 px</span>
          </label>
          <label class="bg-control">
            <span class="bg-control-label">暗角</span>
            <input type="range" id="vignetteRange" min="0" max="100" value="35" step="1" />
            <span class="bg-control-value" id="vignetteValue">35 %</span>
          </label>
          <p class="sidebar-bg-tip">替换 <code>web/image/background.jpg</code> 可换图；设置会保存在本机浏览器。</p>
        </div>
        <div class="sidebar-collapse">
          <button type="button" class="collapse-fab" id="collapseBtn" title="收起侧栏">⟨</button>
        </div>
      </aside>
      <main class="main" id="mainPanel">
        <header class="main-header">
          <button
            type="button"
            class="menu-btn"
            id="menuBtn"
            aria-expanded="false"
            aria-controls="sidebar"
            title="会话与设置"
          >
            ☰
          </button>
          <div class="main-header-text" id="mainHeaderText">
            <h1 class="title">minor · Chatbot</h1>
            <p class="subtitle">本地多模态对话（Web）</p>
          </div>
          <button
            type="button"
            class="header-toggle"
            id="headerToggleBtn"
            aria-expanded="true"
            aria-controls="mainHeaderText"
            title="收起标题栏"
          >
            ▴
          </button>
        </header>
        <section class="chat-shell">
          <div class="chat-placeholder" id="chatPlaceholder">
            <h3>开始对话</h3>
            <p>输入文字，或上传<strong>附件</strong> 后点击发送。</p>
            <p class="muted">支持用户音频输入、助手文本/语音/双模输出、会话本地媒体持久化。</p>
          </div>
          <div class="chat-messages" id="chatMessages" hidden></div>
        </section>
        <footer class="composer">
          <div class="composer-attachments" id="attachmentPreview"></div>
          <div class="composer-row">
            <div class="mm-input" role="group" aria-label="多模态输入">
              <div class="composer-input-shell">
                <textarea
                  id="textInput"
                  rows="2"
                  placeholder="输入消息或添加附件，Enter 发送（Shift+Enter 换行）"
                ></textarea>
                <button type="button" class="mic-btn" id="micBtn" title="使用麦克风录音" aria-pressed="false" aria-label="使用麦克风录音">
                  <img src="/image/microphone.svg" alt="" aria-hidden="true" />
                </button>
              </div>
              <div class="mm-actions">
                <label class="btn btn-ghost file-btn file-btn--icon-only" title="上传附件" aria-label="上传附件">
                  <img src="/image/附件.svg" alt="" aria-hidden="true" class="file-btn-icon" />
                  <input type="file" id="fileInput" multiple hidden />
                </label>
                <label class="output-mode-label" for="outputModeSelect">输出模式</label>
                <select id="outputModeSelect" class="output-mode-select" aria-label="Agent 输出模式">
                  <option value="text">纯文字</option>
                  <option value="audio">纯语音</option>
                  <option value="both">both</option>
                </select>
                <!-- 自动语音输入开关 -->
                <div class="composer-auto-input">
                  <label class="auto-input-label" for="autoInputCheck">
                    自动语音输入
                  </label>
                  <input type="checkbox" id="autoInputCheck" class="auto-input-check" />
                </div>
              </div>
            </div>
            <div class="composer-send">
              <button type="button" class="btn btn-primary" id="sendBtn">发送</button>
              <button type="button" class="btn btn-secondary" id="clearBtn">清空</button>
            </div>
          </div>
        </footer>
      </main>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
    <script src="/app.js"></script>
  </body>
</html>