<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>Kimiflare — DeepSeek V4 在线聊天</title>
    <meta name="description" content="通过 Kimiflare 直接与 DeepSeek V4 对话。">
    <meta name="theme-color" content="#f8f7f2">
    <meta name="robots" content="noindex, nofollow">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="app.css">
    <script src="app.js" defer></script>
  </head>
  <body>
    <a class="skip-link" href="#composer-input" data-i18n="skipToInput">跳到消息输入框</a>

    <div class="app-shell" id="app-shell">
      <header class="app-header">
        <div class="header-side header-side-start">
          <button class="icon-button" id="open-history" type="button" aria-controls="history-drawer" aria-expanded="false" data-i18n-aria="openHistory">
            <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 6h16M4 12h10M4 18h7"/></svg>
          </button>
        </div>

        <a class="brand" href="/" aria-label="Kimiflare">
          <span class="brand-mark" aria-hidden="true"><span></span></span>
          <span class="brand-name">kimiflare</span>
          <span class="model-chip">DeepSeek V4</span>
        </a>

        <div class="header-side header-side-end">
          <button class="new-chat-button" id="new-chat" type="button" data-i18n-aria="newChat">
            <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
            <span data-i18n="newChat">新对话</span>
          </button>
        </div>
      </header>

      <main class="chat-main" id="main-content">
        <div class="chat-scroll" id="chat-scroll">
          <section class="empty-state" id="empty-state" aria-labelledby="empty-title">
            <div class="empty-mark" aria-hidden="true"><span></span></div>
            <h1 id="empty-title" data-i18n="emptyTitle">今天想聊什么？</h1>
            <p data-i18n="emptyDescription">由 DeepSeek V4 Flash 提供回答</p>
            <div class="suggestions" id="suggestions" aria-label="推荐问题"></div>
          </section>

          <section class="message-list" id="message-list" role="log" aria-live="polite" aria-relevant="additions text" aria-label="对话消息"></section>
        </div>

        <div class="composer-region">
          <form class="composer" id="composer">
            <label class="sr-only" for="composer-input" data-i18n="inputLabel">输入消息</label>
            <textarea
              id="composer-input"
              rows="1"
              maxlength="8000"
              autocomplete="off"
              enterkeyhint="send"
              aria-describedby="composer-hint"
              data-i18n-placeholder="inputPlaceholder"
              placeholder="给 DeepSeek 发消息…"
            ></textarea>
            <div class="composer-toolbar">
              <p class="composer-hint" id="composer-hint"><span data-i18n="inputHint">Enter 发送 · Shift + Enter 换行</span><span class="character-count" id="character-count" aria-hidden="true"></span></p>
              <div class="composer-actions">
                <button class="stop-button" id="stop-button" type="button" hidden>
                  <span class="stop-square" aria-hidden="true"></span>
                  <span data-i18n="stop">停止</span>
                </button>
                <button class="send-button" id="send-button" type="submit" disabled data-i18n-aria="send">
                  <svg aria-hidden="true" viewBox="0 0 24 24"><path d="m5 12 14-7-5 14-2-6-7-1Z"/></svg>
                </button>
              </div>
            </div>
          </form>
          <p class="model-note" data-i18n="modelNote">AI 可能会出错，请核对重要信息。</p>
        </div>
      </main>
    </div>

    <div class="drawer-backdrop" id="drawer-backdrop" hidden></div>

    <aside class="drawer history-drawer" id="history-drawer" aria-labelledby="history-title" aria-hidden="true" inert>
      <header class="drawer-header">
        <div>
          <p class="eyebrow" data-i18n="localHistory">保存在此浏览器</p>
          <h2 id="history-title" data-i18n="conversations">对话</h2>
        </div>
        <button class="icon-button" id="close-history" type="button" data-i18n-aria="closeHistory">
          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18"/></svg>
        </button>
      </header>
      <div class="drawer-primary-action">
        <button class="drawer-new-chat" id="drawer-new-chat" type="button">
          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
          <span data-i18n="newChat">新对话</span>
        </button>
      </div>
      <nav class="history-list" id="history-list" aria-label="历史对话"></nav>
      <footer class="drawer-footer">
        <button class="drawer-link" id="open-settings" type="button">
          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.86 2.86-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21H9.55v-.09A1.7 1.7 0 0 0 8.5 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.86-2.86.06-.06A1.7 1.7 0 0 0 4.1 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H2.3V9.55h.09A1.7 1.7 0 0 0 4.1 8.5a1.7 1.7 0 0 0-.34-1.88l-.06-.06L6.56 3.7l.06.06A1.7 1.7 0 0 0 8.5 4.1a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V2.3h4.05v.09A1.7 1.7 0 0 0 15 4.1a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.86 2.86-.06.06A1.7 1.7 0 0 0 19.4 8.5a1.7 1.7 0 0 0 .6 1 1.7 1.7 0 0 0 1.1.4h.09v4.05h-.09A1.7 1.7 0 0 0 19.4 15Z"/></svg>
          <span data-i18n="settings">设置</span>
          <svg class="drawer-link-arrow" aria-hidden="true" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
        </button>
      </footer>
    </aside>

    <aside class="drawer settings-drawer" id="settings-drawer" aria-labelledby="settings-title" aria-hidden="true" inert>
      <header class="drawer-header">
        <button class="icon-button" id="back-to-history" type="button" data-i18n-aria="backToHistory">
          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
        </button>
        <h2 id="settings-title" data-i18n="settings">设置</h2>
        <button class="icon-button" id="close-settings" type="button" data-i18n-aria="closeSettings">
          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18"/></svg>
        </button>
      </header>
      <div class="settings-content">
        <fieldset class="settings-group">
          <legend data-i18n="language">语言</legend>
          <label class="radio-row"><span><strong data-i18n="followBrowser">跟随浏览器</strong><small data-i18n="followBrowserDescription">自动使用浏览器偏好语言</small></span><input type="radio" name="language" value="auto"></label>
          <label class="radio-row"><span><strong>中文</strong><small>简体中文</small></span><input type="radio" name="language" value="zh"></label>
          <label class="radio-row"><span><strong>English</strong><small>English</small></span><input type="radio" name="language" value="en"></label>
        </fieldset>

        <details class="about-details">
          <summary data-i18n="about">关于与隐私</summary>
          <div class="about-content">
            <p><strong>Kimiflare Web Chat</strong></p>
            <p data-i18n="aboutModel">回答由 DeepSeek API 的 deepseek-v4-flash 模型生成。</p>
            <p data-i18n="aboutPrivacy">对话保存在当前浏览器。发送消息时，有限的当前会话上下文会通过服务端提交给 DeepSeek API；API Key 不会发送到浏览器。</p>
            <p data-i18n="aboutTools">此网页不提供 shell、文件访问、MCP 或其他工具调用能力。</p>
          </div>
        </details>
      </div>
    </aside>

    <div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
    <p class="sr-only" id="generation-status" role="status" aria-live="assertive"></p>
  </body>
</html>
