Fix all app CSS loading - add all app CSS to index.html head
This commit is contained in:
parent
c9602593a4
commit
3439a5722c
2 changed files with 110 additions and 70 deletions
|
|
@ -1,34 +1,53 @@
|
|||
<link rel="stylesheet" href="/chat/chat.css" />
|
||||
<link rel="stylesheet" href="chat/chat.css" />
|
||||
<script>
|
||||
// WebSocket URL - use relative path to go through botui proxy
|
||||
const WS_BASE_URL = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
|
||||
const WS_BASE_URL =
|
||||
window.location.protocol === "https:" ? "wss://" : "ws://";
|
||||
const WS_URL = `${WS_BASE_URL}${window.location.host}`;
|
||||
|
||||
// Message Type Constants
|
||||
const MessageType = { EXTERNAL: 0, USER: 1, BOT_RESPONSE: 2, CONTINUE: 3, SUGGESTION: 4, CONTEXT_CHANGE: 5 };
|
||||
const MessageType = {
|
||||
EXTERNAL: 0,
|
||||
USER: 1,
|
||||
BOT_RESPONSE: 2,
|
||||
CONTINUE: 3,
|
||||
SUGGESTION: 4,
|
||||
CONTEXT_CHANGE: 5,
|
||||
};
|
||||
|
||||
// State
|
||||
let ws = null, currentSessionId = null, currentUserId = null, currentBotId = "default";
|
||||
let isStreaming = false, streamingMessageId = null, currentStreamingContent = "";
|
||||
let ws = null,
|
||||
currentSessionId = null,
|
||||
currentUserId = null,
|
||||
currentBotId = "default";
|
||||
let isStreaming = false,
|
||||
streamingMessageId = null,
|
||||
currentStreamingContent = "";
|
||||
let reconnectAttempts = 0;
|
||||
const maxReconnectAttempts = 5;
|
||||
|
||||
// Initialize auth and WebSocket
|
||||
async function initChat() {
|
||||
try {
|
||||
updateConnectionStatus('connecting');
|
||||
const botName = 'default';
|
||||
updateConnectionStatus("connecting");
|
||||
const botName = "default";
|
||||
// Use the botui proxy for auth (handles SSL cert issues)
|
||||
const response = await fetch(`/api/auth?bot_name=${encodeURIComponent(botName)}`);
|
||||
const response = await fetch(
|
||||
`/api/auth?bot_name=${encodeURIComponent(botName)}`,
|
||||
);
|
||||
const auth = await response.json();
|
||||
currentUserId = auth.user_id;
|
||||
currentSessionId = auth.session_id;
|
||||
currentBotId = auth.bot_id || "default";
|
||||
console.log("Auth:", { currentUserId, currentSessionId, currentBotId });
|
||||
console.log("Auth:", {
|
||||
currentUserId,
|
||||
currentSessionId,
|
||||
currentBotId,
|
||||
});
|
||||
connectWebSocket();
|
||||
} catch (e) {
|
||||
console.error("Auth failed:", e);
|
||||
updateConnectionStatus('disconnected');
|
||||
updateConnectionStatus("disconnected");
|
||||
setTimeout(initChat, 3000);
|
||||
}
|
||||
}
|
||||
|
|
@ -41,14 +60,14 @@
|
|||
|
||||
ws.onopen = () => {
|
||||
console.log("WebSocket connected");
|
||||
updateConnectionStatus('connected');
|
||||
updateConnectionStatus("connected");
|
||||
reconnectAttempts = 0;
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.type === 'connected') return;
|
||||
if (data.type === "connected") return;
|
||||
if (data.message_type === MessageType.BOT_RESPONSE) {
|
||||
processMessage(data);
|
||||
}
|
||||
|
|
@ -58,7 +77,7 @@
|
|||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
updateConnectionStatus('disconnected');
|
||||
updateConnectionStatus("disconnected");
|
||||
if (reconnectAttempts < maxReconnectAttempts) {
|
||||
reconnectAttempts++;
|
||||
setTimeout(connectWebSocket, 1000 * reconnectAttempts);
|
||||
|
|
@ -73,29 +92,29 @@
|
|||
if (isStreaming) {
|
||||
finalizeStreaming();
|
||||
} else {
|
||||
addMessage('bot', data.content);
|
||||
addMessage("bot", data.content);
|
||||
}
|
||||
isStreaming = false;
|
||||
} else {
|
||||
if (!isStreaming) {
|
||||
isStreaming = true;
|
||||
streamingMessageId = 'streaming-' + Date.now();
|
||||
currentStreamingContent = data.content || '';
|
||||
addMessage('bot', currentStreamingContent, streamingMessageId);
|
||||
streamingMessageId = "streaming-" + Date.now();
|
||||
currentStreamingContent = data.content || "";
|
||||
addMessage("bot", currentStreamingContent, streamingMessageId);
|
||||
} else {
|
||||
currentStreamingContent += data.content || '';
|
||||
currentStreamingContent += data.content || "";
|
||||
updateStreaming(currentStreamingContent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(sender, content, msgId = null) {
|
||||
const messages = document.getElementById('messages');
|
||||
const div = document.createElement('div');
|
||||
const messages = document.getElementById("messages");
|
||||
const div = document.createElement("div");
|
||||
div.className = `message ${sender}`;
|
||||
if (msgId) div.id = msgId;
|
||||
|
||||
if (sender === 'user') {
|
||||
if (sender === "user") {
|
||||
div.innerHTML = `<div class="message-content user-message">${escapeHtml(content)}</div>`;
|
||||
} else {
|
||||
div.innerHTML = `<div class="message-content bot-message">${marked.parse(content)}</div>`;
|
||||
|
|
@ -106,47 +125,53 @@
|
|||
|
||||
function updateStreaming(content) {
|
||||
const el = document.getElementById(streamingMessageId);
|
||||
if (el) el.querySelector('.message-content').innerHTML = marked.parse(content);
|
||||
if (el)
|
||||
el.querySelector(".message-content").innerHTML =
|
||||
marked.parse(content);
|
||||
}
|
||||
|
||||
function finalizeStreaming() {
|
||||
const el = document.getElementById(streamingMessageId);
|
||||
if (el) {
|
||||
el.querySelector('.message-content').innerHTML = marked.parse(currentStreamingContent);
|
||||
el.removeAttribute('id');
|
||||
el.querySelector(".message-content").innerHTML = marked.parse(
|
||||
currentStreamingContent,
|
||||
);
|
||||
el.removeAttribute("id");
|
||||
}
|
||||
streamingMessageId = null;
|
||||
currentStreamingContent = '';
|
||||
currentStreamingContent = "";
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
const input = document.getElementById('messageInput');
|
||||
const input = document.getElementById("messageInput");
|
||||
const content = input.value.trim();
|
||||
if (!content || !ws || ws.readyState !== WebSocket.OPEN) return;
|
||||
|
||||
addMessage('user', content);
|
||||
addMessage("user", content);
|
||||
|
||||
ws.send(JSON.stringify({
|
||||
ws.send(
|
||||
JSON.stringify({
|
||||
bot_id: currentBotId,
|
||||
user_id: currentUserId,
|
||||
session_id: currentSessionId,
|
||||
channel: 'web',
|
||||
channel: "web",
|
||||
content: content,
|
||||
message_type: MessageType.USER,
|
||||
timestamp: new Date().toISOString()
|
||||
}));
|
||||
timestamp: new Date().toISOString(),
|
||||
}),
|
||||
);
|
||||
|
||||
input.value = '';
|
||||
input.value = "";
|
||||
input.focus();
|
||||
}
|
||||
|
||||
function updateConnectionStatus(status) {
|
||||
const el = document.getElementById('connectionStatus');
|
||||
const el = document.getElementById("connectionStatus");
|
||||
if (el) el.className = `connection-status ${status}`;
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
const div = document.createElement("div");
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
|
@ -154,13 +179,13 @@
|
|||
// Initialize chat - runs immediately when script is executed
|
||||
// (works both on full page load and HTMX partial load)
|
||||
function setupChat() {
|
||||
const input = document.getElementById('messageInput');
|
||||
const sendBtn = document.getElementById('sendBtn');
|
||||
const input = document.getElementById("messageInput");
|
||||
const sendBtn = document.getElementById("sendBtn");
|
||||
|
||||
if (sendBtn) sendBtn.onclick = sendMessage;
|
||||
if (input) {
|
||||
input.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') sendMessage();
|
||||
input.addEventListener("keypress", (e) => {
|
||||
if (e.key === "Enter") sendMessage();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -170,15 +195,18 @@
|
|||
// Initialize after a micro-delay to ensure DOM is ready
|
||||
// This works for both full page loads and HTMX partial loads
|
||||
setTimeout(() => {
|
||||
if (document.getElementById('messageInput') && !window.chatInitialized) {
|
||||
if (
|
||||
document.getElementById("messageInput") &&
|
||||
!window.chatInitialized
|
||||
) {
|
||||
window.chatInitialized = true;
|
||||
setupChat();
|
||||
}
|
||||
}, 0);
|
||||
|
||||
// Fallback for full page load
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
if (!window.chatInitialized) {
|
||||
window.chatInitialized = true;
|
||||
setupChat();
|
||||
|
|
|
|||
|
|
@ -14,7 +14,19 @@
|
|||
<link rel="stylesheet" href="css/app.css" />
|
||||
<link rel="stylesheet" href="css/apps-extended.css" />
|
||||
<link rel="stylesheet" href="css/components.css" />
|
||||
<link rel="stylesheet" href="css/base.css" />
|
||||
|
||||
<!-- App-specific CSS -->
|
||||
<link rel="stylesheet" href="chat/chat.css" />
|
||||
<link rel="stylesheet" href="calendar/calendar.css" />
|
||||
<link rel="stylesheet" href="drive/drive.css" />
|
||||
<link rel="stylesheet" href="mail/mail.css" />
|
||||
<link rel="stylesheet" href="meet/meet.css" />
|
||||
<link rel="stylesheet" href="paper/paper.css" />
|
||||
<link rel="stylesheet" href="research/research.css" />
|
||||
<link rel="stylesheet" href="tasks/tasks.css" />
|
||||
<link rel="stylesheet" href="analytics/analytics.css" />
|
||||
<link rel="stylesheet" href="monitoring/monitoring.css" />
|
||||
|
||||
<!-- Local Libraries (no external CDN dependencies) -->
|
||||
<script src="js/vendor/htmx.min.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue