Update index.js
Alessandro committed
Sep 23, 2024 at 22:57 UTC
3942b2275b0e651cae5097d5932a189c005fd412
1 file changed
+77
-33
webui/index.js
+77
-33
@@ -1,7 +1,7 @@
1
import * as msgs from "./messages.js"
2
3
-const splitter = document.getElementById('splitter');
3
const leftPanel = document.getElementById('left-panel');
4
+const rightPanel = document.getElementById('right-panel');
5
const container = document.querySelector('.container');
6
const chatInput = document.getElementById('chat-input');
7
const chatHistory = document.getElementById('chat-history');
@@ -9,64 +9,95 @@ const sendButton = document.getElementById('send-button');
9
const inputSection = document.getElementById('input-section');
10
const statusSection = document.getElementById('status-section');
11
const chatsSection = document.getElementById('chats-section');
12
+const scrollbarThumb = document.querySelector('#chat-history::-webkit-scrollbar-thumb');
13
14
let autoScroll = true;
15
let context = "";
16
16
-// Sidebar Toggle Setup:
17
-function setupSidebarToggle() {
18
- const toggleSidebarButton = document.getElementById('toggle-sidebar');
17
+// Initialize the toggle button
18
+setupSidebarToggle();
19
+
20
+function isMobile() {
21
+ return window.innerWidth <= 768;
22
+ }
23
+
24
+ function toggleSidebar() {
25
+ leftPanel.classList.toggle('hidden');
26
+ rightPanel.classList.toggle('expanded');
27
+ }
28
+
29
+ function handleResize() {
30
+ if (isMobile()) {
31
+ leftPanel.classList.add('hidden');
32
+ rightPanel.classList.add('expanded');
33
+ } else {
34
+ leftPanel.classList.remove('hidden');
35
+ rightPanel.classList.remove('expanded');
36
+ }
37
+ }
38
+
39
+ // Run on startup and window resize
40
+ window.addEventListener('load', handleResize);
41
+ window.addEventListener('resize', handleResize);
42
+
43
+ function setupSidebarToggle() {
44
const leftPanel = document.getElementById('left-panel');
45
const rightPanel = document.getElementById('right-panel');
21
-
22
- if (toggleSidebarButton && leftPanel && rightPanel) {
23
- toggleSidebarButton.addEventListener('click', () => {
24
- leftPanel.classList.toggle('hidden');
25
- rightPanel.classList.toggle('expanded');
26
- });
46
+ const toggleSidebarButton = document.getElementById('toggle-sidebar');
47
+ if (toggleSidebarButton) {
48
+ toggleSidebarButton.addEventListener('click', toggleSidebar);
49
} else {
28
- setTimeout(setupSidebarToggle, 100);
50
+ console.error('Toggle sidebar button not found');
51
+ setTimeout(setupSidebarToggle, 100);
52
}
30
-}
53
+ }
54
+ // Make sure to call this function
55
+ document.addEventListener('DOMContentLoaded', setupSidebarToggle);
56
32
-// Initialize the toggle button
33
-setupSidebarToggle();
57
async function sendMessage() {
58
const message = chatInput.value.trim();
59
if (message) {
37
-
60
+
61
const response = await sendJsonData("/msg", { text: message, context });
39
-
62
+
63
//setMessage('user', message);
64
chatInput.value = '';
65
adjustTextareaHeight();
66
}
67
}
45
-
68
+
69
chatInput.addEventListener('keydown', (e) => {
70
if (e.key === 'Enter' && !e.shiftKey) {
71
e.preventDefault();
72
sendMessage();
73
}
74
});
52
-
75
+
76
sendButton.addEventListener('click', sendMessage);
77
55
-
56
-function updateUTCTime() {
78
+function updateUserTime() {
79
const now = new Date();
58
- const hours = now.getUTCHours();
59
- const minutes = now.getUTCMinutes();
60
- const seconds = now.getUTCSeconds(); // Get UTC seconds
80
+ const hours = now.getHours();
81
+ const minutes = now.getMinutes();
82
+ const seconds = now.getSeconds();
83
const ampm = hours >= 12 ? 'pm' : 'am';
84
const formattedHours = hours % 12 || 12;
85
+
86
+ // Format the time
87
+ const timeString = `${formattedHours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${ampm}`;
88
+
89
+ // Format the date
90
+ const options = { year: 'numeric', month: 'short', day: 'numeric' };
91
+ const dateString = now.toLocaleDateString(undefined, options);
92
+
93
+ // Update the HTML
94
+ const userTimeElement = document.getElementById('time-date');
95
+ userTimeElement.innerHTML = `${timeString}<br><span id="user-date">${dateString}</span>`;
96
+}
97
64
- document.getElementById('utc-time').textContent =
65
- `${formattedHours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${ampm} UTC`;
66
- }
67
-
68
-updateUTCTime();
69
-setInterval(updateUTCTime, 1000);
98
+updateUserTime();
99
+setInterval(updateUserTime, 1000);
100
+
101
function setMessage(id, type, heading, content, kvps = null) {
102
// Search for the existing message container by id
103
let messageContainer = document.getElementById(`message-${id}`);
@@ -93,7 +124,6 @@ function setMessage(id, type, heading, content, kvps = null) {
124
if (autoScroll) chatHistory.scrollTop = chatHistory.scrollHeight;
125
}
126
96
-
127
function adjustTextareaHeight() {
128
chatInput.style.height = 'auto';
129
chatInput.style.height = (chatInput.scrollHeight) + 'px';
@@ -130,7 +160,7 @@ let lastLogGuid = ""
160
async function poll() {
161
try {
162
const response = await sendJsonData("/poll", { log_from: lastLogVersion, context });
133
- // console.log(response)
163
+ //console.log(response)
164
165
if (response.ok) {
166
@@ -168,8 +198,22 @@ async function poll() {
198
}
199
}
200
201
+function updatePauseButtonState(isPaused) {
202
+ const pauseButton = document.getElementById('pause-button');
203
+ const unpauseButton = document.getElementById('unpause-button');
204
+
205
+ if (isPaused) {
206
+ pauseButton.style.display = 'none';
207
+ unpauseButton.style.display = 'flex';
208
+ } else {
209
+ pauseButton.style.display = 'flex';
210
+ unpauseButton.style.display = 'none';
211
+ }
212
+}
213
+
214
window.pauseAgent = async function (paused) {
215
const resp = await sendJsonData("/pause", { paused: paused, context });
216
+ updatePauseButtonState(paused);
217
}
218
219
window.resetChat = async function () {
@@ -215,7 +259,6 @@ const setContext = function (id) {
259
chatsAD.selected = id
260
}
261
218
-
262
window.toggleAutoScroll = async function (_autoScroll) {
263
autoScroll = _autoScroll;
264
}
@@ -230,6 +273,7 @@ window.toggleThoughts = async function (showThoughts) {
273
toggleCssProperty('.msg-thoughts', 'display', showThoughts ? undefined : 'none');
274
}
275
276
+
277
window.toggleDarkMode = function(isDark) {
278
if (isDark) {
279
document.body.classList.remove('light-mode');
@@ -238,7 +282,7 @@ window.toggleDarkMode = function(isDark) {
282
}
283
console.log("Dark mode:", isDark);
284
localStorage.setItem('darkMode', isDark);
241
- };
285
+};
286
287
// Modify this part
288
document.addEventListener('DOMContentLoaded', () => {