From d8bf7fa398d6d928325be9b5c64ca24875bfeef8 Mon Sep 17 00:00:00 2001
From: Agando <roduccomm@gmail.com>
Date: Sat, 30 May 2026 18:01:51 +0200
Subject: auto: 2026-05-30_18:00 changes

---
 chat/chat-ui.html | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 156 insertions(+)
 create mode 100644 chat/chat-ui.html

(limited to 'chat/chat-ui.html')

diff --git a/chat/chat-ui.html b/chat/chat-ui.html
new file mode 100644
index 0000000..5eedce6
--- /dev/null
+++ b/chat/chat-ui.html
@@ -0,0 +1,156 @@
+<div id="chat-overlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;flex-direction:column;background:var(--bg);">
+  <header class="header">
+    <div style="display:flex;align-items:center;gap:10px;">
+      <button class="hamburger" onclick="toggleSidebar()">☰</button>
+      <span class="header-brand">🤖 WebX11 AI</span>
+    </div>
+    <div class="header-actions">
+      <button class="btn btn-secondary btn-sm" onclick="openSettingsModal()" title="Settings">⚙️</button>
+      <select class="model-select" id="modelSelect" title="Select AI Model">
+        <option value="">Loading...</option>
+      </select>
+      <button class="btn btn-secondary btn-sm" onclick="shareChat()" title="Share chat">📤</button>
+      <button class="btn btn-secondary btn-sm" onclick="clearChat()" title="Clear chat">🗑️</button>
+      <button class="btn btn-secondary btn-sm" onclick="closeChatOverlay()" title="Close (Esc)">✕</button>
+    </div>
+  </header>
+
+  <div class="app-body">
+    <aside class="sidebar" id="sidebar">
+      <button class="modal-close" onclick="toggleSidebar()" style="align-self:flex-end;margin-bottom:8px;">×</button>
+      <div>
+        <h3>Modules</h3>
+        <div class="module-list" id="moduleList"></div>
+        <button class="btn add-module-btn" onclick="openModuleModal()">+ Add Module</button>
+        <div style="display:flex;gap:4px;margin-top:8px;">
+          <button class="btn btn-secondary btn-sm" style="flex:1;" onclick="saveModules();showToast('Modules saved!')">💾 Save</button>
+        </div>
+        <div style="display:flex;gap:4px;margin-top:4px;">
+          <button class="btn btn-secondary btn-sm" style="flex:1;" onclick="exportModules()">📤 Export</button>
+          <button class="btn btn-secondary btn-sm" style="flex:1;" onclick="importModules()">📥 Import</button>
+        </div>
+      </div>
+      <div>
+        <h3>Current Module Help</h3>
+        <div class="help-panel" id="helpPanel">
+          <h4 id="helpTitle">AI Chat</h4>
+          <p id="helpText">Default AI assistant. Ask anything!</p>
+          <div class="help-commands" id="helpCommands"></div>
+        </div>
+      </div>
+      <div>
+        <h3>Activity Log <button class="msg-copy" onclick="copyLogs()" title="Copy logs" style="opacity:1;font-size:0.8em;padding:2px 6px;">📋</button><button class="msg-copy" onclick="clearLogs()" title="Clear logs" style="opacity:1;font-size:0.8em;padding:2px 6px;">🗑️</button></h3>
+        <div class="logs-panel" id="logsPanel">
+          <div id="logsContent"></div>
+        </div>
+      </div>
+    </aside>
+
+    <main class="main">
+      <div class="chat-container" id="chatContainer">
+        <div class="message ai">
+          <div class="role">AI</div>
+          Welcome to <strong>ChatStudio Lite</strong> 🚀<br><br>
+          <strong>Commands:</strong><br>
+          <code>/help</code> - Show help<br>
+          <code>/search [query]</code> - Web search<br>
+          <code>/fetch [url]</code> - Fetch a page<br>
+          <code>/explain [code]</code> - Explain code<br>
+          <code>/clear</code> - Clear chat<br>
+          <code>/status</code> - System status<br>
+        </div>
+      </div>
+
+      <div class="input-area">
+        <textarea id="chatInput" placeholder="Type your message..." autocomplete="off" rows="1" onfocus="this.style.height='80px'" oninput="autoExpand(this);if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMessage();}"></textarea>
+        <button class="btn btn-primary" onclick="sendMessage()">Send</button>
+      </div>
+    </main>
+  </div>
+
+  <div class="modal" id="moduleModal">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 id="moduleModalTitle">Add Module</h2>
+        <button class="modal-close" onclick="closeModuleModal()">×</button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label>Module Name</label>
+          <input type="text" id="moduleName" placeholder="e.g., Search, Code Helper">
+        </div>
+        <div class="form-group">
+          <label>Description</label>
+          <input type="text" id="moduleDesc" placeholder="What does this module do?">
+        </div>
+        <div class="form-group">
+          <label>System Prompt (Instructions)</label>
+          <textarea id="modulePrompt" placeholder="You are a helpful assistant specialized in..."></textarea>
+        </div>
+        <div class="form-group">
+          <label>Help Text (how to use)</label>
+          <textarea id="moduleHelp" placeholder="Explain how to use this module..."></textarea>
+        </div>
+        <div class="form-group">
+          <label>Commands (comma-separated)</label>
+          <input type="text" id="moduleCommands" placeholder="e.g., /search, /find, /web">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" onclick="closeModuleModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="saveModule()">Save Module</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal" id="settingsModal">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>⚙️ Settings</h2>
+        <button class="modal-close" onclick="closeSettingsModal()">×</button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label>Ollama API URL</label>
+          <input type="text" id="ollamaUrl" placeholder="/ollama">
+        </div>
+        <div class="form-group">
+          <label>API Key (optional)</label>
+          <input type="password" id="ollamaApiKey" placeholder="Enter API key if required">
+        </div>
+        <div class="form-group">
+          <label>Default Model</label>
+          <input type="text" id="defaultModel" placeholder="llama2">
+        </div>
+        <div class="form-group" style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border);">
+          <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
+            <input type="checkbox" id="streamingToggle" checked>
+            <span>Streaming responses</span>
+          </label>
+        </div>
+        <div style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border);">
+          <button class="btn btn-secondary" style="width:100%;" onclick="testConnection()">🔗 Test Connection</button>
+          <p id="connectionStatus" style="font-size:0.85em;margin-top:10px;text-align:center;"></p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" onclick="closeSettingsModal()">Cancel</button>
+        <button class="btn btn-primary" onclick="saveSettings()">Save Settings</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="toast" id="toast" style="display:none;"></div>
+
+  <div class="modal" id="previewModal">
+    <div class="modal-content" style="max-width:95vw;max-height:95vh;width:100%;height:100%;">
+      <div class="modal-header">
+        <h2>HTML Preview</h2>
+        <button class="modal-close" onclick="closePreviewModal()">×</button>
+      </div>
+      <div class="modal-body" style="height:calc(100% - 60px);padding:0;">
+        <iframe id="previewFrame" style="width:100%;height:100%;border:none;"></iframe>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3