282 lines
16 KiB
HTML
282 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="theme-color" content="#1a1a2e">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<title>Z.AI Chat</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="setup-screen" class="screen active">
|
|
<div class="setup-container">
|
|
<div class="logo-area">
|
|
<div class="logo-icon">Z</div>
|
|
<h1>Z.AI Chat</h1>
|
|
<p class="subtitle">GLM Coding Plan · Powered by GLM-5.1</p>
|
|
</div>
|
|
<div class="setup-form">
|
|
<div class="input-group">
|
|
<label for="api-token">Coding Plan Token</label>
|
|
<input type="password" id="api-token" placeholder="Enter your Z.AI coding plan API key" autocomplete="off">
|
|
<span class="input-hint">Get your key at <a href="https://z.ai/manage-apikey/apikey-list" target="_blank">z.ai/apikeys</a> · <a href="https://z.ai/subscribe" target="_blank">Subscribe</a></span>
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="base-url">Endpoint</label>
|
|
<select id="base-url">
|
|
<option value="https://api.z.ai/api/coding/paas/v4" selected>Coding Plan (api.z.ai/coding)</option>
|
|
<option value="https://api.z.ai/api/paas/v4">General API (api.z.ai)</option>
|
|
<option value="https://open.bigmodel.cn/api/paas/v4">China (bigmodel.cn)</option>
|
|
</select>
|
|
</div>
|
|
<button id="connect-btn" class="btn-primary">
|
|
<span class="btn-text">Connect</span>
|
|
<span class="btn-loader" style="display:none"></span>
|
|
</button>
|
|
<div id="setup-error" class="error-msg" style="display:none"></div>
|
|
</div>
|
|
<div class="setup-modes">
|
|
<h3>Modes Available</h3>
|
|
<div class="mode-cards">
|
|
<div class="mode-card">
|
|
<span class="mode-icon">💬</span>
|
|
<span class="mode-name">Chat</span>
|
|
<span class="mode-desc">General conversation</span>
|
|
</div>
|
|
<div class="mode-card">
|
|
<span class="mode-icon">💻</span>
|
|
<span class="mode-name">Coding</span>
|
|
<span class="mode-desc">Code assistant</span>
|
|
</div>
|
|
<div class="mode-card">
|
|
<span class="mode-icon">💡</span>
|
|
<span class="mode-name">Brainstorm</span>
|
|
<span class="mode-desc">Ideation partner</span>
|
|
</div>
|
|
<div class="mode-card">
|
|
<span class="mode-icon">🤖</span>
|
|
<span class="mode-name">Agentic</span>
|
|
<span class="mode-desc">Autonomous coding</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chat-screen" class="screen">
|
|
<div class="chat-header">
|
|
<div class="header-left">
|
|
<button id="menu-btn" class="icon-btn">☰</button>
|
|
<div class="header-title">
|
|
<h2 id="conversation-title">New Chat</h2>
|
|
<span id="current-mode-label" class="mode-label">Chat</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="theme-toggle-header" class="theme-toggle-btn" title="Toggle theme">☾</button>
|
|
<button id="new-chat-btn" class="icon-btn" title="New chat">+</button>
|
|
<button id="settings-btn" class="icon-btn" title="Settings">⚙</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebar" class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h3>Conversations</h3>
|
|
<button id="sidebar-close" class="icon-btn">×</button>
|
|
</div>
|
|
<div id="conversation-list" class="conversation-list"></div>
|
|
<div class="sidebar-footer">
|
|
<button id="new-chat-sidebar" class="btn-secondary">+ New Chat</button>
|
|
</div>
|
|
</div>
|
|
<div id="sidebar-overlay" class="sidebar-overlay"></div>
|
|
|
|
<div id="messages" class="messages"></div>
|
|
|
|
<div id="terminal-panel" class="terminal-panel">
|
|
<div class="terminal-header">
|
|
<span class="terminal-title">■ Terminal</span>
|
|
<span class="terminal-info" id="terminal-info"></span>
|
|
</div>
|
|
<div id="terminal-body" class="terminal-body"></div>
|
|
</div>
|
|
<button id="terminal-toggle" class="terminal-toggle-btn" style="display:none">
|
|
<span class="terminal-icon">▶</span>
|
|
<span class="terminal-label">Show Terminal</span>
|
|
</button>
|
|
|
|
<div class="chat-input-area">
|
|
<div id="mode-selector" class="mode-selector">
|
|
<button class="mode-btn active" data-mode="chat">Chat</button>
|
|
<button class="mode-btn" data-mode="coding">Coding</button>
|
|
<button class="mode-btn" data-mode="brainstorm">Brainstorm</button>
|
|
<button class="mode-btn" data-mode="agentic">Agentic</button>
|
|
</div>
|
|
<div class="input-row">
|
|
<textarea id="message-input" placeholder="Type your message..." rows="1"></textarea>
|
|
<button id="send-btn" class="send-btn" disabled>
|
|
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" fill="currentColor"/></svg>
|
|
</button>
|
|
<button id="stop-btn" class="stop-btn" style="display:none">
|
|
<svg viewBox="0 0 24 24" width="24" height="24"><rect x="6" y="6" width="12" height="12" fill="currentColor" rx="2"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="settings-screen" class="screen">
|
|
<div class="settings-container">
|
|
<div class="settings-header">
|
|
<button id="settings-back" class="icon-btn">←</button>
|
|
<h2>Settings</h2>
|
|
</div>
|
|
<div class="settings-body">
|
|
<div class="settings-section">
|
|
<h3>API Configuration</h3>
|
|
<div class="input-group">
|
|
<label for="settings-token">API Token</label>
|
|
<input type="password" id="settings-token" placeholder="Your API token">
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="settings-url">Base URL</label>
|
|
<input type="text" id="settings-url" placeholder="https://api.z.ai/api/coding/paas/v4">
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Model Settings</h3>
|
|
<div class="input-group">
|
|
<label for="settings-model">Model</label>
|
|
<select id="settings-model">
|
|
<option value="glm-5.1" selected>GLM-5.1 (Flagship)</option>
|
|
<option value="glm-5-turbo">GLM-5 Turbo</option>
|
|
<option value="glm-4.7">GLM-4.7</option>
|
|
<option value="glm-4.5-air">GLM-4.5 Air (Fast)</option>
|
|
<option value="glm-5v-turbo">GLM-5V Turbo (Vision)</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Temperature: <span id="temp-value">0.7</span></label>
|
|
<input type="range" id="settings-temp" min="0" max="1" step="0.1" value="0.7">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Max Tokens: <span id="tokens-value">4096</span></label>
|
|
<input type="range" id="settings-tokens" min="256" max="16384" step="256" value="4096">
|
|
</div>
|
|
<div class="input-group toggle-group">
|
|
<label>Web Search</label>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="settings-websearch">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="input-group toggle-group">
|
|
<label>Streaming</label>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="settings-streaming" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Appearance</h3>
|
|
<div class="input-group toggle-group">
|
|
<label>Dark Mode</label>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="settings-darkmode" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Data</h3>
|
|
<button id="export-btn" class="btn-secondary">Export Conversations</button>
|
|
<button id="clear-btn" class="btn-danger">Clear All Data</button>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>About</h3>
|
|
<p class="about-text">Z.AI Chat v1.2.2</p>
|
|
<p class="about-text">Built with Z.AI SDK & GLM-5.1</p>
|
|
<p class="about-text">Compatible with Android 15/16</p>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h3>Changelog</h3>
|
|
<ul class="changelog-list">
|
|
<li>
|
|
<span class="changelog-version">v1.2.2</span>
|
|
<span class="changelog-date">2026-05-19</span>
|
|
<ul>
|
|
<li>Fixed: network error on app backgrounding — now auto-retries with reconnect</li>
|
|
<li>Streaming resumes from last saved token after reconnection</li>
|
|
<li>Exponential backoff retry (3 attempts) for network interruptions</li>
|
|
<li>Retry button shown for failed requests due to connectivity</li>
|
|
<li>Offline/online detection with status banner</li>
|
|
<li>Visibility change handler saves state on app background</li>
|
|
<li>Partial response preserved and restorable on reconnect</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<span class="changelog-version">v1.2.1</span>
|
|
<span class="changelog-date">2026-05-19</span>
|
|
<ul>
|
|
<li>Fixed: messages lost when switching conversations during streaming</li>
|
|
<li>Streaming responses now auto-save every 20 tokens to prevent data loss</li>
|
|
<li>Partial responses preserved when switching sessions mid-generation</li>
|
|
<li>Added in-app terminal panel for Coding and Agentic modes</li>
|
|
<li>Terminal parses code blocks, file ops, and tool calls from AI responses</li>
|
|
<li>Terminal toggle button with collapsible panel</li>
|
|
<li>Terminal state persists across sessions</li>
|
|
<li>Conversation list now shows message count</li>
|
|
<li>Improved conversation switch safety with flush-before-switch</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<span class="changelog-version">v1.2.0</span>
|
|
<span class="changelog-date">2026-05-19</span>
|
|
<ul>
|
|
<li>Added light mode / dark mode toggle</li>
|
|
<li>Theme persists across sessions</li>
|
|
<li>Theme toggle button in chat header</li>
|
|
<li>Theme setting in Settings screen</li>
|
|
<li>Added changelog section to Settings</li>
|
|
<li>Optimized light theme color palette</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<span class="changelog-version">v1.1.0</span>
|
|
<span class="changelog-date">2026-05-19</span>
|
|
<ul>
|
|
<li>Z.AI Coding Plan endpoint support</li>
|
|
<li>Fixed API base URL to use coding plan endpoint</li>
|
|
<li>Updated model list (GLM-5.1, GLM-5 Turbo, GLM-4.7, GLM-4.5 Air)</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<span class="changelog-version">v1.0.0</span>
|
|
<span class="changelog-date">2026-05-19</span>
|
|
<ul>
|
|
<li>Initial release</li>
|
|
<li>Chat, Coding, Brainstorm, Agentic modes</li>
|
|
<li>Streaming SSE responses</li>
|
|
<li>Markdown rendering with syntax highlighting</li>
|
|
<li>Conversation management with sidebar</li>
|
|
<li>Settings with model, temperature, tokens controls</li>
|
|
<li>Web search integration</li>
|
|
<li>Export conversations to JSON</li>
|
|
<li>Android 15/16 support (targetSdk 36)</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="js/marked.min.js"></script>
|
|
<script src="js/highlight.min.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|