diff options
Diffstat (limited to 'chat/chat-ui.html')
| -rw-r--r-- | chat/chat-ui.html | 156 |
1 files changed, 156 insertions, 0 deletions
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 |