406 lines
24 KiB
HTML
406 lines
24 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>
|
|
<button class="mode-btn mode-btn-term" data-mode="terminal" style="background:var(--success);border-color:var(--success);color:white">▪ Term</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="terminal-screen" class="screen">
|
|
<div class="term-screen-container">
|
|
<div class="term-screen-header">
|
|
<button id="term-back-btn" class="icon-btn">←</button>
|
|
<h2>Terminal</h2>
|
|
<div class="term-screen-header-right">
|
|
<span id="term-cwd-display" class="term-cwd-display">~</span>
|
|
<button id="term-setup-tools-btn" class="icon-btn" title="Setup Dev Tools">🛠</button>
|
|
</div>
|
|
</div>
|
|
<div id="term-output" class="term-output"></div>
|
|
<div class="term-input-area">
|
|
<div class="term-quick-actions">
|
|
<button class="term-quick-btn" data-cmd="ls -la">ls</button>
|
|
<button class="term-quick-btn" data-cmd="pwd">pwd</button>
|
|
<button class="term-quick-btn" data-cmd="cat ">cat</button>
|
|
<button class="term-quick-btn" data-cmd="mkdir -p ">mkdir</button>
|
|
<button class="term-quick-btn" data-cmd="which aapt2 java ecj d8 2>/dev/null">tools</button>
|
|
<button class="term-quick-btn" data-cmd="df -h . && free -h 2>/dev/null">sys</button>
|
|
</div>
|
|
<div class="term-input-row">
|
|
<span class="term-prompt">$</span>
|
|
<input type="text" id="term-input" class="term-input" placeholder="Enter command..." autocomplete="off" spellcheck="false">
|
|
<button id="term-run-btn" class="term-run-btn">▶</button>
|
|
<button id="term-stop-btn" class="term-stop-btn" style="display:none">■</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="devsetup-screen" class="screen">
|
|
<div class="setup-container">
|
|
<div class="logo-area">
|
|
<div class="logo-icon" style="background:linear-gradient(135deg, #2ed573, #6c63ff)">🛠</div>
|
|
<h1>Dev Environment</h1>
|
|
<p class="subtitle">Set up on-device build tools</p>
|
|
</div>
|
|
<div id="devsetup-status" class="devsetup-status">
|
|
<p>Downloads build tools to compile & install APKs directly on your device.</p>
|
|
<p>Required: ~50MB download (aapt2, d8, ecj, android.jar, apksigner)</p>
|
|
</div>
|
|
<div id="devsetup-progress" style="display:none">
|
|
<div class="devsetup-progress-bar">
|
|
<div id="devsetup-progress-fill" class="devsetup-progress-fill"></div>
|
|
</div>
|
|
<p id="devsetup-progress-text" class="devsetup-progress-text">Preparing...</p>
|
|
</div>
|
|
<button id="devsetup-install-btn" class="btn-primary">
|
|
<span class="btn-text">Install Dev Tools</span>
|
|
<span class="btn-loader" style="display:none"></span>
|
|
</button>
|
|
<button id="devsetup-back-btn" class="btn-secondary" style="margin-top:12px">Back to Terminal</button>
|
|
</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>Terminal & Agent</h3>
|
|
<div class="input-group toggle-group">
|
|
<label>Auto-Deploy Files</label>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="settings-autodeploy" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
<span class="input-hint">AI-generated code auto-deploys to device in Coding/Agentic modes</span>
|
|
<div class="input-group toggle-group" style="margin-top:12px">
|
|
<label>Keep Screen On</label>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="settings-keepawake">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
<span class="input-hint">Prevents screen sleep while agent is working</span>
|
|
</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.3.1</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.3.1</span>
|
|
<span class="changelog-date">2026-05-19</span>
|
|
<ul>
|
|
<li>Fixed: AI actions now AUTO-EXECUTE — files deploy, APKs build & install automatically</li>
|
|
<li>Added Keep Screen On toggle — prevents sleep while agent works</li>
|
|
<li>Added Auto-Deploy toggle — controls whether AI actions auto-execute</li>
|
|
<li>Status toasts show deploy/build/install progress</li>
|
|
<li>New settings section: Terminal & Agent (Auto-Deploy, Keep Screen On)</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<span class="changelog-version">v1.3.0</span>
|
|
<span class="changelog-date">2026-05-19</span>
|
|
<ul>
|
|
<li>Full interactive Terminal screen — execute real shell commands on your device</li>
|
|
<li>Native Shell plugin — run commands, read/write files, create directories</li>
|
|
<li>APK Installer plugin — install built APKs directly from the app</li>
|
|
<li>Deploy Files button — AI-generated code saved to device with one tap</li>
|
|
<li>Build APK button — compiles Android projects on-device (needs Termux tools)</li>
|
|
<li>Install APK button — triggers Android package installer for built APKs</li>
|
|
<li>AI action parser — detects [CREATE_FILE], [RUN_COMMAND], [BUILD_APK], [INSTALL_APK]</li>
|
|
<li>Quick commands toolbar in terminal (ls, pwd, cat, mkdir, tools, sys)</li>
|
|
<li>Command history with arrow keys</li>
|
|
<li>Built-in commands: help, sysinfo, create, install, clear, exit, setup</li>
|
|
<li>Dev environment setup screen — bootstrap build tools</li>
|
|
<li>Project scaffolding — quick-create Android project structure</li>
|
|
<li>Enhanced Agentic mode prompt for on-device build awareness</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<span class="changelog-version">v1.2.4</span>
|
|
<span class="changelog-date">2026-05-19</span>
|
|
<ul>
|
|
<li>Save button on every code block — downloads code as a real file to your phone</li>
|
|
<li>Copy & Save buttons on every AI response — one-tap copy or save as .txt</li>
|
|
<li>File paths in AI responses are now highlighted and tappable (tap to copy)</li>
|
|
<li>Smart filename detection — auto-names saved files from code content</li>
|
|
<li>30+ language-to-extension mappings for proper file saving</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<span class="changelog-version">v1.2.3</span>
|
|
<span class="changelog-date">2026-05-19</span>
|
|
<ul>
|
|
<li>Fixed: Connect button not working — missing function declaration caused JS parse error</li>
|
|
<li>All UI event handlers now correctly initialized on app start</li>
|
|
</ul>
|
|
</li>
|
|
<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>
|