blob: efe0347238b015ab874990dcb258eeba1b109ae9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
<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 class="form-group" style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border);">
<label>Generate with AI</label>
<textarea id="aiModuleDesc" placeholder="Describe the module you want... e.g. A code review assistant that checks for security issues" style="min-height:60px;"></textarea>
<button class="btn btn-secondary" style="width:100%;margin-top:8px;" onclick="generateModuleWithAI(event)">🤖 Generate with AI</button>
</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;" sandbox="allow-same-origin"></iframe>
</div>
</div>
</div>
</div>
|
