opc-agent 4.0.44 → 4.1.1

package/dist/studio-ui/index.html

@@ -388,6 +388,9 @@
           <div class="nav-item" data-page="global-models" onclick="navigate('global-models')">
             <span class="icon">🧠</span> Models
           </div>
+          <div class="nav-item" data-page="global-channels" onclick="navigate('global-channels')">
+            <span class="icon">📡</span> Channels
+          </div>
           <div class="nav-item" data-page="global-memory" onclick="navigate('global-memory')">
             <span class="icon">💾</span> Memory
           </div>
@@ -419,6 +422,14 @@
           </div>
           <button class="btn btn-primary" onclick="navigate('create')">✨ Create New Agent</button>
         </div>
+        <!-- Dashboard Stats -->
+        <div class="card-grid" style="margin-bottom:24px;" id="dashboard-stats"></div>
+        <!-- Quick Actions -->
+        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;" id="dashboard-actions">
+          <button class="btn btn-secondary" onclick="navigate('create')">✨ Create Agent</button>
+          <button class="btn btn-secondary" onclick="navigate('global-models')">🧠 Configure Model</button>
+          <button class="btn btn-secondary" onclick="navigate('templates')">📋 Browse Templates</button>
+        </div>
         <!-- Health Status Section -->
         <div id="health-section" style="margin-bottom:24px;"></div>
         <div id="agents-list" class="card-grid"></div>
@@ -470,31 +481,46 @@
           <div class="agent-settings-content" id="agent-settings-content">
             <div class="agent-tab-panel active" id="atab-role">
               <h3>角色配置</h3>
-              <p style="color:var(--text-muted)">Agent 角色和人设配置（即将上线）</p>
+              <div class="form-group"><label class="label">Agent 名称</label><input class="input" id="atab-role-name" placeholder="Agent name"></div>
+              <div class="form-group"><label class="label">描述</label><textarea class="input" id="atab-role-desc" rows="2" placeholder="Brief description..."></textarea></div>
+              <div class="form-group"><label class="label">System Prompt</label><textarea class="input" id="atab-role-prompt" rows="6" placeholder="You are a helpful assistant..."></textarea></div>
+              <button class="btn btn-primary" onclick="saveAgentRole()">💾 保存</button>
+              <span id="atab-role-status" style="margin-left:12px;font-size:18px;"></span>
             </div>
             <div class="agent-tab-panel" id="atab-models">
               <h3>模型配置</h3>
-              <p style="color:var(--text-muted)">Agent 使用的模型配置（即将上线）</p>
+              <div class="form-group">
+                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:18px;"><input type="checkbox" id="atab-model-override"> 覆盖全局模型设置</label>
+              </div>
+              <div id="atab-model-fields" style="display:none;">
+                <div class="form-group"><label class="label">Provider</label><select class="input" id="atab-model-provider"><option value="ollama">Ollama (Local)</option><option value="openai">OpenAI</option><option value="anthropic">Anthropic</option><option value="deepseek">DeepSeek</option></select></div>
+                <div class="form-group"><label class="label">Model</label><input class="input" id="atab-model-name" placeholder="e.g. gpt-4o-mini"></div>
+                <div class="form-group"><label class="label">Temperature</label><input class="input" id="atab-model-temp" type="number" min="0" max="2" step="0.1" value="0.7"></div>
+              </div>
+              <button class="btn btn-primary" onclick="saveAgentModel()">💾 保存</button>
+              <span id="atab-model-status" style="margin-left:12px;font-size:18px;"></span>
             </div>
             <div class="agent-tab-panel" id="atab-channels">
               <h3>渠道配置</h3>
-              <p style="color:var(--text-muted)">Agent 接入的渠道配置（即将上线）</p>
+              <div id="atab-channels-list" style="font-size:18px;color:var(--text-muted);">加载中...</div>
+              <button class="btn btn-primary" style="margin-top:16px;" onclick="saveAgentChannels()">💾 保存</button>
+              <span id="atab-channels-status" style="margin-left:12px;font-size:18px;"></span>
             </div>
             <div class="agent-tab-panel" id="atab-memory">
               <h3>记忆管理</h3>
-              <p style="color:var(--text-muted)">Agent 记忆和知识库（即将上线）</p>
+              <div id="atab-memory-list" style="font-size:18px;color:var(--text-muted);">加载中...</div>
             </div>
             <div class="agent-tab-panel" id="atab-skills">
               <h3>技能配置</h3>
-              <p style="color:var(--text-muted)">Agent 已安装的技能（即将上线）</p>
+              <div id="atab-skills-list" style="font-size:18px;color:var(--text-muted);">加载中...</div>
             </div>
             <div class="agent-tab-panel" id="atab-schedules">
               <h3>定时任务</h3>
-              <p style="color:var(--text-muted)">Agent 定时任务配置（即将上线）</p>
+              <div id="atab-schedules-list" style="font-size:18px;color:var(--text-muted);">加载中...</div>
             </div>
             <div class="agent-tab-panel" id="atab-usage">
               <h3>用量统计</h3>
-              <p style="color:var(--text-muted)">Agent 使用量和成本（即将上线）</p>
+              <div id="atab-usage-content" style="font-size:18px;color:var(--text-muted);">加载中...</div>
             </div>
           </div>
         </div>
@@ -735,6 +761,10 @@
             <label class="label">Description</label>
             <textarea class="input" id="sched-desc" rows="2" placeholder="e.g. Send a news summary every morning at 8am"></textarea>
           </div>
+          <div class="form-group">
+            <label class="label">Agent</label>
+            <select class="input" id="sched-agent"></select>
+          </div>
           <div class="form-group">
             <label class="label">Output Channel</label>
             <select class="input" id="sched-channel">
@@ -1127,6 +1157,7 @@
     async function init() {
       await Promise.all([loadTemplates(), loadAgents(), loadSidebarAgents()]);
       loadSidebarGroups();
+      loadDashboardStats();
       handleRoute();
       window.addEventListener('popstate', handleRoute);
       checkFirstRun();
@@ -1317,26 +1348,61 @@
 
       agentChatHistory.push({ role: 'user', content: msg });
 
-      // Send to API
+      // Add assistant message placeholder
+      const assistantDiv = document.createElement('div');
+      assistantDiv.className = 'agent-chat-msg assistant';
+      assistantDiv.textContent = '';
+      messagesEl.appendChild(assistantDiv);
+
+      // Send to API and parse SSE stream
       try {
         const res = await fetch(`/api/agents/${selectedAgentId}/chat`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ message: msg, history: agentChatHistory })
+          body: JSON.stringify({ message: msg, history: agentChatHistory.slice(0, -1) })
         });
-        const data = await res.json();
-        const reply = data.reply || data.message || data.content || JSON.stringify(data);
-        const assistantDiv = document.createElement('div');
-        assistantDiv.className = 'agent-chat-msg assistant';
-        assistantDiv.textContent = reply;
-        messagesEl.appendChild(assistantDiv);
-        agentChatHistory.push({ role: 'assistant', content: reply });
+
+        if (!res.ok) {
+          let errMsg = `HTTP ${res.status}`;
+          try { const ej = await res.json(); errMsg = ej.error || errMsg; } catch {}
+          throw new Error(errMsg);
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let fullReply = '';
+        let buffer = '';
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          buffer = lines.pop() || '';
+          for (const line of lines) {
+            const trimmed = line.trim();
+            if (!trimmed || !trimmed.startsWith('data: ')) continue;
+            const data = trimmed.slice(6);
+            if (data === '[DONE]') continue;
+            try {
+              const parsed = JSON.parse(data);
+              const content = parsed.choices?.[0]?.delta?.content;
+              if (content) {
+                fullReply += content;
+                assistantDiv.textContent = fullReply;
+                messagesEl.scrollTop = messagesEl.scrollHeight;
+              }
+            } catch {}
+          }
+        }
+
+        if (!fullReply) {
+          assistantDiv.textContent = '(No response received)';
+        }
+        agentChatHistory.push({ role: 'assistant', content: fullReply });
       } catch(e) {
-        const errDiv = document.createElement('div');
-        errDiv.className = 'agent-chat-msg assistant';
-        errDiv.style.borderColor = 'var(--red)';
-        errDiv.textContent = `⚠️ 发送失败: ${e.message}`;
-        messagesEl.appendChild(errDiv);
+        assistantDiv.style.borderColor = 'var(--red)';
+        assistantDiv.textContent = `⚠️ 发送失败: ${e.message}`;
       }
       messagesEl.scrollTop = messagesEl.scrollHeight;
     }
@@ -1355,11 +1421,12 @@
       const navItem = document.querySelector(`.nav-item[data-page="${page}"]`);
       if (navItem) navItem.classList.add('active');
 
-      if (page === 'dashboard') { loadAgents(); loadHealthDashboard(); loadSidebarAgents(); }
+      if (page === 'dashboard') { loadAgents(); loadHealthDashboard(); loadSidebarAgents(); loadDashboardStats(); }
       if (page === 'create') { renderWizard(); renderWizardTemplates(); }
       if (page === 'settings') { showSettings(currentSettingsTab || 'models'); }
       if (page === 'global-runtime') { currentSettingsTab='status'; showSettings('status'); showPage('settings'); return; }
       if (page === 'global-models') { currentSettingsTab='models'; showSettings('models'); showPage('settings'); return; }
+      if (page === 'global-channels') { currentSettingsTab='channels'; showSettings('channels'); showPage('settings'); return; }
       if (page === 'global-memory') { currentSettingsTab='memory'; showSettings('memory'); showPage('settings'); return; }
       if (page === 'global-templates') { navigate('templates'); return; }
       if (page === 'create-group') { loadGroupAgentSelect(); }
@@ -2429,8 +2496,31 @@
     let frCreatedAgentId = null;
 
     async function checkFirstRun() {
-      // Skip first-run wizard — agents are configured via init
-      return;
+      try {
+        const res = await fetch(`${API}/api/first-run/status`);
+        const data = await res.json();
+        if (data.completed) return; // already configured
+        // Check if models are configured — if so, skip
+        const modelRes = await fetch(`${API}/api/settings/models`);
+        const modelData = await modelRes.json();
+        const hasCloudKey = modelData.providers && Object.values(modelData.providers).some(p => p && p.apiKey);
+        if (hasCloudKey) return; // user already has API keys
+        // Check if Ollama is running with models
+        const ollamaRes = await fetch(`${API}/api/settings/models/local`);
+        const ollamaData = await ollamaRes.json();
+        if (ollamaData.running && ollamaData.models?.length > 0) {
+          // Ollama ready — auto-set local mode and skip wizard
+          await fetch(`${API}/api/settings/models`, {
+            method: 'PUT', headers: {'Content-Type':'application/json'},
+            body: JSON.stringify({ mode: 'local', provider: 'ollama', chatModel: ollamaData.models[0]?.name || 'qwen2.5:7b' })
+          });
+          return;
+        }
+        // Nothing configured — show wizard
+        showFirstRunWizard({ ollamaDetected: ollamaData.running, ollamaModels: ollamaData.models });
+      } catch {
+        // API not ready, skip
+      }
     }
 
     function showFirstRunWizard(data) {
@@ -2561,6 +2651,167 @@
       });
     }
 
+    // === Dashboard Stats ===
+    async function loadDashboardStats() {
+      const el = document.getElementById('dashboard-stats');
+      if (!el) return;
+      try {
+        const [agentsRes, modelsRes] = await Promise.all([
+          fetch('/api/agents').then(r=>r.json()).catch(()=>({})),
+          fetch('/api/settings/models').then(r=>r.json()).catch(()=>({})),
+        ]);
+        const agentList = agentsRes.agents || [];
+        const currentModel = modelsRes.chatModel || 'Not configured';
+        el.innerHTML = `
+          <div class="card stat-card"><div class="stat-value">${agentList.length}</div><div class="stat-label">Agents</div></div>
+          <div class="card stat-card"><div class="stat-value" style="font-size:18px;">${currentModel}</div><div class="stat-label">Current Model</div></div>
+          <div class="card stat-card"><div class="stat-value">${agentList.filter(a=>(a.status||'').toLowerCase()==='online').length}</div><div class="stat-label">Online</div></div>
+        `;
+      } catch { el.innerHTML = ''; }
+    }
+
+    // === Agent Detail Settings Tab Logic ===
+    function switchAgentTabOrig(tab) {
+      document.querySelectorAll('.agent-tab').forEach(t => t.classList.remove('active'));
+      document.querySelector(`.agent-tab[data-atab="${tab}"]`)?.classList.add('active');
+      document.querySelectorAll('.agent-tab-panel').forEach(p => p.classList.remove('active'));
+      document.getElementById(`atab-${tab}`)?.classList.add('active');
+      loadAgentTabData(tab);
+    }
+    // Override original
+    switchAgentTab = switchAgentTabOrig;
+
+    async function loadAgentTabData(tab) {
+      if (!selectedAgentId) return;
+      const id = selectedAgentId;
+      try {
+        if (tab === 'role') {
+          const res = await fetch(`/api/agents/${id}`);
+          const a = await res.json();
+          document.getElementById('atab-role-name').value = a.name || '';
+          document.getElementById('atab-role-desc').value = a.description || '';
+          document.getElementById('atab-role-prompt').value = a.systemPrompt || a.prompt || '';
+        } else if (tab === 'models') {
+          const res = await fetch(`/api/agents/${id}`);
+          const a = await res.json();
+          const ov = document.getElementById('atab-model-override');
+          const fields = document.getElementById('atab-model-fields');
+          ov.checked = !!a.modelOverride;
+          fields.style.display = ov.checked ? '' : 'none';
+          ov.onchange = () => { fields.style.display = ov.checked ? '' : 'none'; };
+          if (a.modelOverride) {
+            document.getElementById('atab-model-provider').value = a.provider || 'ollama';
+            document.getElementById('atab-model-name').value = a.model || '';
+            document.getElementById('atab-model-temp').value = a.temperature ?? 0.7;
+          }
+        } else if (tab === 'channels') {
+          const chList = ['web','telegram','discord','slack','feishu','email','whatsapp'];
+          const res = await fetch(`/api/agents/${id}`);
+          const a = await res.json();
+          const enabled = a.channels || ['web'];
+          document.getElementById('atab-channels-list').innerHTML = chList.map(ch =>
+            `<label style="display:flex;align-items:center;gap:10px;padding:8px 0;font-size:18px;cursor:pointer;">
+              <input type="checkbox" class="atab-ch-cb" value="${ch}" ${enabled.includes(ch)?'checked':''}>
+              ${ch.charAt(0).toUpperCase()+ch.slice(1)}
+            </label>`
+          ).join('');
+        } else if (tab === 'memory') {
+          const el = document.getElementById('atab-memory-list');
+          el.innerHTML = '<span style="color:var(--text-muted);">⏳ Loading...</span>';
+          try {
+            const res = await fetch(`/api/agents/${id}/memory`);
+            const data = await res.json();
+            const entries = data.entries || [];
+            if (!entries.length) { el.innerHTML = '<p style="color:var(--text-muted);">No memories yet.</p>'; return; }
+            el.innerHTML = '<div class="timeline">' + entries.map(e =>
+              `<div class="timeline-item"><div class="timeline-date">${new Date(e.timestamp).toLocaleString()}</div><div class="timeline-content">${esc(e.summary||e.content||'')}</div></div>`
+            ).join('') + '</div>';
+          } catch { el.innerHTML = '<p style="color:var(--text-muted);">Failed to load memories.</p>'; }
+        } else if (tab === 'skills') {
+          const el = document.getElementById('atab-skills-list');
+          el.innerHTML = '<span style="color:var(--text-muted);">⏳ Loading...</span>';
+          try {
+            const res = await fetch(`/api/agents/${id}`);
+            const a = await res.json();
+            const skills = a.skills || [];
+            if (!skills.length) { el.innerHTML = '<p style="color:var(--text-muted);">No skills installed.</p>'; return; }
+            el.innerHTML = skills.map(s => `<div class="card" style="margin-bottom:8px;padding:12px;"><span style="font-size:18px;font-weight:600;">${s.name||s}</span></div>`).join('');
+          } catch { el.innerHTML = '<p style="color:var(--text-muted);">Failed to load skills.</p>'; }
+        } else if (tab === 'schedules') {
+          const el = document.getElementById('atab-schedules-list');
+          el.innerHTML = '<span style="color:var(--text-muted);">⏳ Loading...</span>';
+          try {
+            const res = await fetch('/api/schedules');
+            const all = await res.json();
+            const tasks = (Array.isArray(all)?all:[]).filter(t => t.agentId === id);
+            if (!tasks.length) { el.innerHTML = '<p style="color:var(--text-muted);">No schedules for this agent.</p>'; return; }
+            el.innerHTML = tasks.map(t => `<div class="card" style="margin-bottom:8px;padding:12px;display:flex;align-items:center;gap:12px;">
+              <span>⏰</span><div style="flex:1;"><div style="font-weight:600;font-size:18px;">${esc(t.name)}</div><div style="font-size:18px;color:var(--text-dim);">${esc(t.schedule||t.frequency||'')}</div></div>
+              <span style="font-size:18px;color:${t.enabled?'var(--green)':'var(--text-dim)'};">${t.enabled?'Active':'Paused'}</span>
+            </div>`).join('');
+          } catch { el.innerHTML = '<p style="color:var(--text-muted);">Failed to load schedules.</p>'; }
+        } else if (tab === 'usage') {
+          const el = document.getElementById('atab-usage-content');
+          el.innerHTML = '<span style="color:var(--text-muted);">⏳ Loading...</span>';
+          try {
+            const res = await fetch('/api/settings/usage');
+            const data = await res.json();
+            const tokens = data.totalTokens || 0;
+            const cost = data.totalCost || 0;
+            el.innerHTML = `<div class="card-grid"><div class="card stat-card"><div class="stat-value">${tokens>1000?(tokens/1000).toFixed(1)+'K':tokens}</div><div class="stat-label">Total Tokens</div></div><div class="card stat-card"><div class="stat-value">$${cost.toFixed(4)}</div><div class="stat-label">Est. Cost</div></div></div>`;
+          } catch { el.innerHTML = '<p style="color:var(--text-muted);">Failed to load usage data.</p>'; }
+        }
+      } catch(e) { console.error('loadAgentTabData error:', e); }
+    }
+
+    async function saveAgentRole() {
+      if (!selectedAgentId) return;
+      const st = document.getElementById('atab-role-status');
+      try {
+        await fetch(`/api/agents/${selectedAgentId}`, { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({
+          name: document.getElementById('atab-role-name').value.trim(),
+          description: document.getElementById('atab-role-desc').value.trim(),
+          systemPrompt: document.getElementById('atab-role-prompt').value.trim(),
+        })});
+        st.textContent = '✅ Saved'; st.style.color = 'var(--green)';
+        loadSidebarAgents();
+      } catch { st.textContent = '❌ Failed'; st.style.color = 'var(--red)'; }
+    }
+
+    async function saveAgentModel() {
+      if (!selectedAgentId) return;
+      const st = document.getElementById('atab-model-status');
+      const ov = document.getElementById('atab-model-override').checked;
+      const body = { modelOverride: ov };
+      if (ov) { body.provider = document.getElementById('atab-model-provider').value; body.model = document.getElementById('atab-model-name').value; body.temperature = parseFloat(document.getElementById('atab-model-temp').value); }
+      try {
+        await fetch(`/api/agents/${selectedAgentId}`, { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body) });
+        st.textContent = '✅ Saved'; st.style.color = 'var(--green)';
+      } catch { st.textContent = '❌ Failed'; st.style.color = 'var(--red)'; }
+    }
+
+    async function saveAgentChannels() {
+      if (!selectedAgentId) return;
+      const st = document.getElementById('atab-channels-status');
+      const channels = [...document.querySelectorAll('.atab-ch-cb:checked')].map(cb => cb.value);
+      try {
+        await fetch(`/api/agents/${selectedAgentId}`, { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ channels }) });
+        st.textContent = '✅ Saved'; st.style.color = 'var(--green)';
+      } catch { st.textContent = '❌ Failed'; st.style.color = 'var(--red)'; }
+    }
+
+    // === Populate schedule form agent select ===
+    async function populateSchedAgentSelect() {
+      const sel = document.getElementById('sched-agent');
+      if (!sel) return;
+      try {
+        const res = await fetch('/api/agents');
+        const data = await res.json();
+        const list = data.agents || [];
+        sel.innerHTML = list.map(a => `<option value="${a.id}">${a.name||a.id}</option>`).join('');
+      } catch { sel.innerHTML = '<option value="">No agents</option>'; }
+    }
+
     // === Start ===
     init();
 
@@ -2627,6 +2878,9 @@
       document.getElementById('sched-desc').value = task ? task.description : '';
       document.getElementById('sched-channel').value = task ? task.outputChannel : 'web';
       onSchedFreqChange();
+      populateSchedAgentSelect().then(() => {
+        if (task?.agentId) document.getElementById('sched-agent').value = task.agentId;
+      });
     }
 
     function hideScheduleForm() {
@@ -2647,6 +2901,7 @@
         time: document.getElementById('sched-time').value,
         schedule: document.getElementById('sched-frequency').value === 'custom' ? document.getElementById('sched-cron').value.trim() : '',
         description: document.getElementById('sched-desc').value.trim(),
+        agentId: document.getElementById('sched-agent').value,
         outputChannel: document.getElementById('sched-channel').value,
         enabled: true,
       };

package/dist/ui/components.js

@@ -13,111 +13,111 @@ function generateChatWidget(config) {
     const msgUser = isDark ? '#0f3460' : '#e3f2fd';
     const msgBot = isDark ? '#1a1a2e' : '#f5f5f5';
     const accent = '#00d2ff';
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>${title}</title>
-<style>
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: ${bg}; color: ${fg}; height: 100vh; display: flex; flex-direction: column; }
-.chat-header { padding: 16px 20px; background: ${isDark ? '#16213e' : '#fafafa'}; border-bottom: 1px solid ${isDark ? '#2a2a4a' : '#e0e0e0'}; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
-.chat-header::before { content: '💬'; }
-.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
-.msg { max-width: 80%; padding: 10px 14px; border-radius: 12px; line-height: 1.5; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
-.msg.user { align-self: flex-end; background: ${msgUser}; border-bottom-right-radius: 4px; }
-.msg.assistant { align-self: flex-start; background: ${msgBot}; border: 1px solid ${isDark ? '#2a2a4a' : '#e0e0e0'}; border-bottom-left-radius: 4px; }
-.msg.streaming::after { content: '▊'; animation: blink 0.7s infinite; }
-@keyframes blink { 50% { opacity: 0; } }
-.chat-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid ${isDark ? '#2a2a4a' : '#e0e0e0'}; background: ${isDark ? '#16213e' : '#fafafa'}; }
-.chat-input textarea { flex: 1; resize: none; border: 1px solid ${isDark ? '#2a2a4a' : '#ccc'}; border-radius: 8px; padding: 10px; font-size: 14px; background: ${inputBg}; color: ${fg}; outline: none; font-family: inherit; min-height: 42px; max-height: 120px; }
-.chat-input textarea:focus { border-color: ${accent}; }
-.chat-input button { background: ${accent}; color: #000; border: none; border-radius: 8px; padding: 0 20px; cursor: pointer; font-weight: 600; font-size: 14px; }
-.chat-input button:hover { opacity: 0.85; }
-.chat-input button:disabled { opacity: 0.4; cursor: not-allowed; }
-</style>
-</head>
-<body>
-<div class="chat-header">${title}</div>
-<div class="chat-messages" id="messages"></div>
-<div class="chat-input">
-  <textarea id="input" rows="1" placeholder="Type a message..." onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMessage()}"></textarea>
-  <button id="sendBtn" onclick="sendMessage()">Send</button>
-</div>
-<script>
-const ENDPOINT = ${JSON.stringify(endpoint)};
-const messages = [];
-const $msgs = document.getElementById('messages');
-const $input = document.getElementById('input');
-const $btn = document.getElementById('sendBtn');
-
-function addMsg(role, text) {
-  const div = document.createElement('div');
-  div.className = 'msg ' + role;
-  div.textContent = text;
-  $msgs.appendChild(div);
-  $msgs.scrollTop = $msgs.scrollHeight;
-  return div;
-}
-
-async function sendMessage() {
-  const text = $input.value.trim();
-  if (!text) return;
-  $input.value = '';
-  $btn.disabled = true;
-  messages.push({ role: 'user', content: text });
-  addMsg('user', text);
-
-  const div = addMsg('assistant', '');
-  div.classList.add('streaming');
-  let full = '';
-
-  try {
-    const res = await fetch(ENDPOINT, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ messages }),
-    });
-
-    if (res.headers.get('content-type')?.includes('text/event-stream')) {
-      const reader = res.body.getReader();
-      const decoder = new TextDecoder();
-      let buf = '';
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buf += decoder.decode(value, { stream: true });
-        const lines = buf.split('\\n');
-        buf = lines.pop() || '';
-        for (const line of lines) {
-          if (line.startsWith('data: ')) {
-            const data = line.slice(6);
-            if (data === '[DONE]') break;
-            try { const j = JSON.parse(data); full += j.content || j.delta || ''; div.textContent = full; } catch {}
-          }
-        }
-        $msgs.scrollTop = $msgs.scrollHeight;
-      }
-    } else {
-      const data = await res.json();
-      full = data.content || data.message || JSON.stringify(data);
-      div.textContent = full;
-    }
-  } catch (e) {
-    full = 'Error: ' + e.message;
-    div.textContent = full;
-  }
-
-  div.classList.remove('streaming');
-  messages.push({ role: 'assistant', content: full });
-  $btn.disabled = false;
-  $input.focus();
-}
-
-$input.focus();
-</script>
-</body>
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${title}</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: ${bg}; color: ${fg}; height: 100vh; display: flex; flex-direction: column; }
+.chat-header { padding: 16px 20px; background: ${isDark ? '#16213e' : '#fafafa'}; border-bottom: 1px solid ${isDark ? '#2a2a4a' : '#e0e0e0'}; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
+.chat-header::before { content: '💬'; }
+.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+.msg { max-width: 80%; padding: 10px 14px; border-radius: 12px; line-height: 1.5; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
+.msg.user { align-self: flex-end; background: ${msgUser}; border-bottom-right-radius: 4px; }
+.msg.assistant { align-self: flex-start; background: ${msgBot}; border: 1px solid ${isDark ? '#2a2a4a' : '#e0e0e0'}; border-bottom-left-radius: 4px; }
+.msg.streaming::after { content: '▊'; animation: blink 0.7s infinite; }
+@keyframes blink { 50% { opacity: 0; } }
+.chat-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid ${isDark ? '#2a2a4a' : '#e0e0e0'}; background: ${isDark ? '#16213e' : '#fafafa'}; }
+.chat-input textarea { flex: 1; resize: none; border: 1px solid ${isDark ? '#2a2a4a' : '#ccc'}; border-radius: 8px; padding: 10px; font-size: 14px; background: ${inputBg}; color: ${fg}; outline: none; font-family: inherit; min-height: 42px; max-height: 120px; }
+.chat-input textarea:focus { border-color: ${accent}; }
+.chat-input button { background: ${accent}; color: #000; border: none; border-radius: 8px; padding: 0 20px; cursor: pointer; font-weight: 600; font-size: 14px; }
+.chat-input button:hover { opacity: 0.85; }
+.chat-input button:disabled { opacity: 0.4; cursor: not-allowed; }
+</style>
+</head>
+<body>
+<div class="chat-header">${title}</div>
+<div class="chat-messages" id="messages"></div>
+<div class="chat-input">
+  <textarea id="input" rows="1" placeholder="Type a message..." onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMessage()}"></textarea>
+  <button id="sendBtn" onclick="sendMessage()">Send</button>
+</div>
+<script>
+const ENDPOINT = ${JSON.stringify(endpoint)};
+const messages = [];
+const $msgs = document.getElementById('messages');
+const $input = document.getElementById('input');
+const $btn = document.getElementById('sendBtn');
+
+function addMsg(role, text) {
+  const div = document.createElement('div');
+  div.className = 'msg ' + role;
+  div.textContent = text;
+  $msgs.appendChild(div);
+  $msgs.scrollTop = $msgs.scrollHeight;
+  return div;
+}
+
+async function sendMessage() {
+  const text = $input.value.trim();
+  if (!text) return;
+  $input.value = '';
+  $btn.disabled = true;
+  messages.push({ role: 'user', content: text });
+  addMsg('user', text);
+
+  const div = addMsg('assistant', '');
+  div.classList.add('streaming');
+  let full = '';
+
+  try {
+    const res = await fetch(ENDPOINT, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ messages }),
+    });
+
+    if (res.headers.get('content-type')?.includes('text/event-stream')) {
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buf = '';
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        const lines = buf.split('\\n');
+        buf = lines.pop() || '';
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            const data = line.slice(6);
+            if (data === '[DONE]') break;
+            try { const j = JSON.parse(data); full += j.content || j.delta || ''; div.textContent = full; } catch {}
+          }
+        }
+        $msgs.scrollTop = $msgs.scrollHeight;
+      }
+    } else {
+      const data = await res.json();
+      full = data.content || data.message || JSON.stringify(data);
+      div.textContent = full;
+    }
+  } catch (e) {
+    full = 'Error: ' + e.message;
+    div.textContent = full;
+  }
+
+  div.classList.remove('streaming');
+  messages.push({ role: 'assistant', content: full });
+  $btn.disabled = false;
+  $input.focus();
+}
+
+$input.focus();
+</script>
+</body>
 </html>`;
 }
 //# sourceMappingURL=components.js.map