Add files using upload-large-folder tool

7c31071 verified 19 days ago

39.5 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LinksomeGPT</title>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
	<style>
	:root {
	--primary: #6366f1;
	--primary-dark: #4f46e5;
	--secondary: #8b5cf6;
	--accent: #06b6d4;
	--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--card-bg: rgba(255, 255, 255, 0.95);
	--text-primary: #1e293b;
	--text-secondary: #64748b;
	--border: #e2e8f0;
	--success: #10b981;
	--danger: #ef4444;
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--radius: 16px;
	--radius-sm: 12px;
	--sidebar-width: 320px;
	}
	/* Ensure tables have borders */
	table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--border); /* Adds border to the entire table */
	}

	th, td {
	padding: 8px 12px;
	text-align: left;
	border: 1px solid var(--border); /* Adds border to each cell */
	}

	tr:nth-child(even) {
	background-color: #f9fafb;
	}

	tr:hover {
	background-color: #f1f5f9;
	}


	* { box-sizing: border-box; }

	body {
	font-family: 'Inter', sans-serif;
	margin: 0; padding: 0;
	background: var(--bg-gradient);
	min-height: 100vh;
	overflow: hidden;
	}

	.app { display: flex; height: 100vh; }
	.suggestion-btn {
	background: #eef2ff;
	color: var(--primary-dark);
	border: 1px solid var(--primary);
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
	}

	.suggestion-btn:hover {
	background: var(--primary);
	color: white;
	}


	.sidebar {
	width: var(--sidebar-width);
	background: var(--card-bg);
	backdrop-filter: blur(20px);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-lg);
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.sidebar-header {
	padding: 24px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 12px;
	height: 72px;
	flex-shrink: 0;
	}

	.sidebar-title {
	font-size: 20px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--primary), var(--secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 0;
	flex: 1;
	}

	.new-chat-btn {
	padding: 8px 12px;
	background: var(--primary);
	color: white;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
	flex-shrink: 0;
	}

	.new-chat-btn:hover { background: var(--primary-dark); transform: scale(1.05); }

	.chat-list { flex: 1; overflow-y: auto; padding: 8px 0; }

	.chat-item {
	padding: 16px 24px;
	cursor: pointer;
	border-left: 3px solid transparent;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 12px;
	}

	.chat-item:hover { background: rgba(99, 102, 241, 0.05); }
	.chat-item.active { background: rgba(99, 102, 241, 0.1); border-left-color: var(--primary); font-weight: 500; }

	.chat-avatar {
	width: 32px; height: 32px; border-radius: 50%;
	background: linear-gradient(135deg, var(--primary), var(--secondary));
	display: flex; align-items: center; justify-content: center;
	color: white; font-size: 14px; font-weight: 600;
	}

	.chat-info { flex: 1; min-width: 0; }
	.chat-title { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.chat-preview { font-size: 14px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

	.delete-chat { color: var(--danger); font-size: 14px; opacity: 0; transition: opacity 0.2s ease; }
	.chat-item:hover .delete-chat { opacity: 1; }

	.main { flex: 1; display: flex; flex-direction: column; position: relative; }

	.container { height: 100%; padding: 0; display: flex; flex-direction: column; }

	.title {
	padding: 24px;
	text-align: center;
	font-size: clamp(24px, 5vw, 36px);
	font-weight: 700;
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 0;
	opacity: 0;
	transform: translateY(-30px);
	animation: slideInDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 12px;
	}

	@keyframes slideInDown { to { opacity: 1; transform: translateY(0); } }

	/* ===== SCHOOL SELECTOR WIDGET ===== */
	.school-selector {
	background: var(--card-bg);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--border);
	padding: 16px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	box-shadow: var(--shadow-sm);
	}

	.school-selector label {
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
	margin-right: 8px;
	}

	.school-btn {
	background: #f8fafc;
	color: var(--text-primary);
	border: 1px solid var(--border);
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	min-width: fit-content;
	}

	.school-btn:hover {
	background: #e2e8f0;
	border-color: var(--primary);
	transform: translateY(-1px);
	}

	.school-btn.active {
	background: linear-gradient(135deg, var(--primary), var(--secondary));
	color: white;
	border-color: transparent;
	box-shadow: var(--shadow-md);
	}

	.school-btn.active:hover {
	background: linear-gradient(135deg, var(--primary-dark), #7c3aed);
	}
	/* ====================================== */

	#chat-container {
	flex-grow: 1;
	background: var(--card-bg);
	backdrop-filter: blur(20px);
	padding: 24px;
	overflow-y: auto;
	border: 1px solid rgba(255, 255, 255, 0.2);
	}

	#chat-container::-webkit-scrollbar { width: 6px; }
	#chat-container::-webkit-scrollbar-track { background: transparent; }
	#chat-container::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 3px; }
	#chat-container::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.5); }

	.message {
	margin: 12px 0;
	padding: 16px 20px;
	border-radius: var(--radius);
	line-height: 1.6;
	word-wrap: break-word;
	opacity: 0;
	transform: translateY(20px);
	animation: messageSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	min-width: 100px;
	max-width: 100%;
	box-sizing: border-box;
	}

	.message:nth-child(even) { animation-delay: 0.1s; }
	@keyframes messageSlideIn { to { opacity: 1; transform: translateY(0); } }

	.user-message {
	background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
	color: white;
	margin-left: auto;
	box-shadow: var(--shadow-md);
	position: relative;
	}

	.user-message::after {
	content: '';
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
	width: 0; height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid var(--primary);
	}

	.assistant-message {
	background: white;
	color: var(--text-primary);
	margin-right: auto;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border);
	position: relative;
	}

	.assistant-message::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	width: 0; height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid var(--border);
	}

	#input-container {
	padding: 24px;
	display: flex;
	gap: 12px;
	background: var(--card-bg);
	backdrop-filter: blur(20px);
	border-top: 1px solid var(--border);
	align-items: center;
	}

	#user-input {
	flex: 1;
	padding: 14px 20px;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	font-size: 16px;
	background: white;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: var(--shadow-sm);
	}

	#user-input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
	transform: translateY(-1px);
	}

	.btn {
	padding: 12px 24px;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	}

	#send-button { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; min-width: 80px; justify-content: center; }
	#send-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
	#send-button:disabled { background: #cbd5e1; cursor: not-allowed; transform: none; }

	#thinking-toggle { background: linear-gradient(135deg, var(--success) 0%, #059669 100%); color: white; min-width: 120px; }
	#thinking-toggle.off { background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%); }
	#thinking-toggle:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

	#scroll-to-bottom {
	position: fixed;
	bottom: 120px;
	right: 24px;
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
	border: none;
	border-radius: 50%;
	color: white;
	font-size: 16px;
	cursor: pointer;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: scale(0);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	#scroll-to-bottom.show { opacity: 1; visibility: visible; transform: scale(1); }
	#scroll-to-bottom:hover { transform: scale(1.1); box-shadow: 0 12px 20px -3px rgba(99, 102, 241, 0.4); }
	#scroll-to-bottom:active { transform: scale(0.95); }

	@media (max-width: 768px) {
	.sidebar { transform: translateX(-100%); position: fixed; z-index: 1000; height: 100vh; }
	.sidebar.open { transform: translateX(0); }
	.main { width: 100%; }
	#input-container { padding: 16px; flex-wrap: wrap; }
	.btn { padding: 12px 16px; font-size: 13px; }
	#chat-container { padding: 16px; }
	#scroll-to-bottom { bottom: 100px; right: 16px; width: 44px; height: 44px; font-size: 14px; }
	.sidebar-header { height: 64px; padding: 16px; }
	.title { height: 64px; padding: 16px; gap: 8px; }
	.school-selector { padding: 12px 16px; gap: 8px; }
	.school-btn { font-size: 12px; padding: 6px 10px; }
	}

	details { margin: 16px 0; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
	details summary { padding: 16px 20px; cursor: pointer; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 12px; transition: all 0.2s ease; }
	details summary:hover { background: rgba(99, 102, 241, 0.1); color: var(--primary); }
	details[open] summary { background: rgba(99, 102, 241, 0.05); }
	.thinking-content { padding: 0 20px 16px; color: var(--text-secondary); line-height: 1.6; }
	.thinking-widget { margin: 16px 0; }

	.typing-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 16px 20px; }
	.typing-indicator span { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: typing 1.4s infinite ease-in-out; }
	.typing-indicator span:nth-child(2) { animation-delay: .2s; }
	.typing-indicator span:nth-child(3) { animation-delay: .4s; }
	@keyframes typing { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-10px); } }
	</style>
	</head>
	<body>
	<div class="app">
	<div class="sidebar" id="sidebar">
	<div class="sidebar-header">
	<h2 class="sidebar-title"><i class="fas fa-comments"></i> Chats</h2>
	<button class="new-chat-btn" id="new-chat-btn" title="New Chat"><i class="fas fa-plus"></i></button>
	</div>
	<div class="chat-list" id="chat-list"></div>
	</div>

	<div class="main">
	<div class="container">
	<h1 class="title" id="chat-title"><i class="fas fa-graduation-cap"></i> LinksomeGPT</h1>

	<!-- SCHOOL SELECTOR WIDGET -->
	<div class="school-selector">
	<label><i class="fas fa-school"></i> School Context:</label>
	<button class="school-btn" data-school="Millfield School">Millfield</button>
	<button class="school-btn" data-school="Felsted School">Felsted</button>
	<button class="school-btn" data-school="Buckswood School">Buckswood</button>
	<button class="school-btn" data-school="Cardiff Sixth Form College">Cardiff SFC</button>
	<button class="school-btn" data-school="OIC Brighton">OIC Brighton</button>
	<button class="school-btn active" data-school="Multi Schools">Multi</button>
	</div>
	<!-- SUGGESTED QUESTIONS -->
	<div id="suggested-questions" style="
	display: flex;
	gap: 12px;
	padding: 16px 24px;
	flex-wrap: wrap;
	">
	<button class="suggestion-btn">Introduce Millfield.</button>
	<button class="suggestion-btn">What are the tuition fees? Make a table.</button>
	<button class="suggestion-btn">What is the contact information about Millfield?</button>
	<button class="suggestion-btn">When was Millfield founded, and who founded it?</button>
	</div>

	<div id="chat-container"></div>
	<div id="input-container">
	<input type="text" id="user-input" placeholder="Ask LinksomeGPT...">
	<button id="thinking-toggle" class="btn on"><i class="fas fa-brain"></i> Thinking On</button>
	<button id="send-button" class="btn"><i class="fas fa-paper-plane"></i> Send</button>
	</div>
	</div>
	</div>
	</div>

	<button id="scroll-to-bottom" title="Scroll to bottom"><i class="fas fa-chevron-down"></i></button>

	<script type="text/javascript">
	var gk_isXlsx = false;
	var gk_xlsxFileLookup = {};
	var gk_fileData = {};
	function filledCell(cell) { return cell !== '' && cell != null; }
	function loadFileData(filename) {
	if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
	try {
	var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
	var firstSheetName = workbook.SheetNames[0];
	var worksheet = workbook.Sheets[firstSheetName];
	var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
	var filteredData = jsonData.filter(row => row.some(filledCell));
	var headerRowIndex = filteredData.findIndex((row, index) =>
	row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
	);
	if (headerRowIndex === -1 \|\| headerRowIndex > 25) { headerRowIndex = 0; }
	var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex));
	csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
	return csv;
	} catch (e) { console.error(e); return ""; }
	}
	return gk_fileData[filename] \|\| "";
	}
	</script>

	<script>
	function getCurrentDateFormatted() {
	const now = new Date();
	return now.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
	}

	function generateSystemPrompt(meta_0) {
	const current_date = new Date().toISOString().split('T')[0];
	return `<MILLFIELD>`;
	}

	let conversations = JSON.parse(localStorage.getItem('abbey-chats')) \|\| [];
	let currentChatId = conversations.length > 0 ? conversations[0]?.id : null;
	let messages = [];
	let thinkingWidgetCount = 0;
	let enableThinking = true;
	let autoScrollEnabled = true;
	let currentSchool = 'Millfield School'; // Default context

	const chatContainer = document.getElementById('chat-container');
	const userInput = document.getElementById('user-input');
	const sendButton = document.getElementById('send-button');
	const thinkingToggle = document.getElementById('thinking-toggle');
	const chatList = document.getElementById('chat-list');
	const newChatBtn = document.getElementById('new-chat-btn');
	const chatTitle = document.getElementById('chat-title');
	const scrollToBottomBtn = document.getElementById('scroll-to-bottom');
	const apiUrl = 'http://0.0.0.0:8000/v1/chat/completions';

	// SCHOOL BUTTONS
	const schoolButtons = document.querySelectorAll('.school-btn');
	schoolButtons.forEach(btn => {
	btn.addEventListener('click', () => {
	const school = btn.dataset.school;

	// Only proceed if switching to a different school
	if (currentSchool === school) return;

	// Update UI
	schoolButtons.forEach(b => b.classList.remove('active'));
	btn.classList.add('active');

	// Generate prompt with special text for Multi
	const meta_0 = school === 'Multi Schools'
	? 'the 5 UK Private Schools and Colleges (OIC Brighton, Millfield, Felsted, Cardiff Sixth Form College, and Buckswood)'
	: school;
	const newSysPrompt = generateSystemPrompt(meta_0);

	const chat = conversations.find(c => c.id === currentChatId);
	if (!chat) return;

	// Remove old system messages
	chat.messages = chat.messages.filter(m => m.role !== 'system');
	messages = messages.filter(m => m.role !== 'system');

	// Add new system message
	const sysMsg = { role: 'system', content: newSysPrompt };
	chat.messages.unshift(sysMsg);
	messages.unshift(sysMsg);

	saveConversations();
	addMessage(`Context switched to ${school}**`, 'assistant');

	currentSchool = school; // Update current context
	});
	});

	function isAtBottom() {
	return chatContainer.scrollTop + chatContainer.clientHeight >= chatContainer.scrollHeight - 10;
	}

	function scrollToBottom() {
	chatContainer.scrollTop = chatContainer.scrollHeight;
	updateScrollButton();
	}

	function updateScrollButton() {
	if (isAtBottom()) {
	scrollToBottomBtn.classList.remove('show');
	autoScrollEnabled = true;
	} else {
	scrollToBottomBtn.classList.add('show');
	}
	}

	let scrollTimeout;
	chatContainer.addEventListener('scroll', () => {
	clearTimeout(scrollTimeout);
	scrollTimeout = setTimeout(() => {
	if (isAtBottom()) autoScrollEnabled = true;
	else { autoScrollEnabled = false; updateScrollButton(); }
	}, 150);
	});

	scrollToBottomBtn.addEventListener('click', () => {
	scrollToBottom();
	autoScrollEnabled = true;
	});
	updateScrollButton();

	function init() {
	renderChatList();
	if (currentChatId) loadConversation(currentChatId);
	else createNewChat();
	userInput.focus();
	}

	function createNewChat() {
	const chatId = Date.now().toString();
	const currentDate = getCurrentDateFormatted();

	// Default to Multi Schools context
	const meta_0 = 'Millfield School';
	const defaultPrompt = generateSystemPrompt(meta_0);

	const newChat = {
	id: chatId,
	title: 'LinksomeGPT',
	preview: '',
	messages: [{
	role: "system",
	content: defaultPrompt
	}],
	timestamp: Date.now()
	};
	conversations.unshift(newChat);
	currentChatId = chatId;
	messages = [...newChat.messages];
	document.getElementById('suggested-questions').style.display = 'flex';
	saveConversations();
	renderChatList();
	loadConversation(chatId);
	chatTitle.innerHTML = '<i class="fas fa-graduation-cap"></i> Welcome to LinksomeGPT';

	// Ensure Multi button is active
	schoolButtons.forEach(b => b.classList.remove('active'));
	document.querySelector('[data-school="Millfield School"]').classList.add('active');
	currentSchool = 'Millfield School';
	}

	newChatBtn.addEventListener('click', createNewChat);

	function saveConversations() {
	localStorage.setItem('abbey-chats', JSON.stringify(conversations));
	}

	function renderChatList() {
	chatList.innerHTML = conversations.map(chat => `
	<div class="chat-item ${chat.id === currentChatId ? 'active' : ''}" data-chat-id="${chat.id}">
	<div class="chat-avatar">${chat.title[0].toUpperCase()}</div>
	<div class="chat-info">
	<div class="chat-title">${chat.title}</div>
	<div class="chat-preview">${chat.preview \|\| 'Welcome!'}</div>
	</div>
	<i class="fas fa-trash delete-chat" onclick="deleteChat('${chat.id}', event)"></i>
	</div>
	`).join('');

	document.querySelectorAll('.chat-item').forEach(item => {
	item.addEventListener('click', (e) => {
	if (!e.target.classList.contains('delete-chat')) {
	loadConversation(item.dataset.chatId);
	}
	});
	});
	}

	function loadConversation(chatId) {
	const chat = conversations.find(c => c.id === chatId);
	if (!chat) return;

	currentChatId = chatId;
	messages = [...chat.messages];
	chatContainer.innerHTML = '';

	// Determine current school from the first system message
	const sysMsg = chat.messages.find(m => m.role === 'system');
	if (sysMsg) {
	const match = sysMsg.content.match(/related to \\(.+?)\\/);
	currentSchool = match && match[1].includes('Millfield School') ? 'Millfield School' : (match ? match[1] : 'Millfield School');
	} else {
	currentSchool = 'Millfield School';
	}

	// Update button states
	schoolButtons.forEach(b => b.classList.remove('active'));
	const activeBtn = document.querySelector(`[data-school="${currentSchool}"]`);
	if (activeBtn) activeBtn.classList.add('active');

	chat.messages.forEach((msg) => {
	if (msg.role === 'system') return;
	if (msg.role === 'assistant' && msg.thinkingContent) {
	addThinkingWidget(msg.thinkingContent, false);
	}
	addMessage(msg.content, msg.role);
	});

	chatTitle.innerHTML = `<i class="fas fa-comments"></i> ${chat.title}`;
	renderChatList();
	setTimeout(scrollToBottom, 100);
	}

	function deleteChat(chatId, event) {
	event.stopPropagation();
	if (confirm('Delete this conversation?')) {
	conversations = conversations.filter(c => c.id !== chatId);
	if (currentChatId === chatId) {
	currentChatId = conversations.length > 0 ? conversations[0].id : null;
	if (currentChatId) loadConversation(currentChatId);
	else createNewChat();
	}
	saveConversations();
	renderChatList();
	}
	}

	function updateChatTitleAndPreview(firstWords = '') {
	const chat = conversations.find(c => c.id === currentChatId);
	if (chat && firstWords) {
	chat.title = firstWords.length > 30 ? firstWords.substring(0, 30) + '...' : firstWords;
	chat.preview = firstWords.length > 50 ? firstWords.substring(0, 50) + '...' : firstWords;
	saveConversations();
	renderChatList();
	}
	}

	function clearInput() { userInput.value = ''; userInput.focus(); }

	function escapeHtml(text) {
	const div = document.createElement('div');
	div.textContent = text;
	return div.innerHTML;
	}

	function addMessage(content, role, messageDiv = null) {
	let element = messageDiv;
	if (!element) {
	element = document.createElement('div');
	element.className = `message ${role}-message`;

	const safeContent = role === 'assistant'
	? escapeHtml(content \|\| '')
	: (content \|\| '');

	element.innerHTML = marked.parse(safeContent);
	chatContainer.appendChild(element);
	} else {
	if (content) {
	const safeContent = role === 'assistant' ? escapeHtml(content) : content;
	element.innerHTML = marked.parse(safeContent);
	}
	}

	setTimeout(() => {
	if (autoScrollEnabled \|\| role === 'user') scrollToBottom();
	else updateScrollButton();
	}, 50);
	return element;
	}

	function addThinkingWidget(content, insertAfterUser = true) {
	const widgetId = `thinking-widget-${thinkingWidgetCount++}`;
	const thinkingWidget = document.createElement('div');
	thinkingWidget.className = 'thinking-widget';
	thinkingWidget.id = widgetId;
	thinkingWidget.innerHTML = `
	<details open>
	<summary><i class="fas fa-lightbulb"></i> Thinking Process</summary>
	<div class="thinking-content" id="thinking-content-${widgetId}"></div>
	</details>
	`;
	const thinkingContent = thinkingWidget.querySelector(`#thinking-content-${widgetId}`);
	thinkingContent.innerHTML = marked.parse(content);

	if (insertAfterUser) {
	const lastUser = chatContainer.querySelector('.user-message:last-child');
	if (lastUser) lastUser.insertAdjacentElement('afterend', thinkingWidget);
	else chatContainer.appendChild(thinkingWidget);
	} else {
	chatContainer.appendChild(thinkingWidget);
	}

	setTimeout(scrollToBottom, 50);
	return thinkingWidget;
	}

	thinkingToggle.addEventListener('click', () => {
	enableThinking = !enableThinking;
	thinkingToggle.innerHTML = enableThinking
	? '<i class="fas fa-brain"></i> Thinking On'
	: '<i class="fas fa-brain"></i> Thinking Off';
	thinkingToggle.className = `btn ${enableThinking ? 'on' : 'off'}`;
	});

	async function sendMessage() {
	const content = userInput.value.trim();
	if (!content) return;
	document.getElementById('suggested-questions').style.display = 'none';

	sendButton.disabled = true;
	userInput.disabled = true;
	sendButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
	autoScrollEnabled = true;

	const userMsg = { role: "user", content };
	messages.push(userMsg);
	const chat = conversations.find(c => c.id === currentChatId);
	chat.messages.push(userMsg);

	addMessage(content, 'user');
	updateChatTitleAndPreview(content);
	clearInput();

	try {
	const response = await fetch(apiUrl, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer 0' },
	body: JSON.stringify({
	messages,
	model: '',
	do_sample: false,
	stream: true,
	enable_thinking: enableThinking,
	max_tokens: 50000,
	})
	});

	if (!response.ok) throw new Error('Network response was not ok');

	let assistantResponse = '';
	let thinkingContent = '';
	let finalAnswer = '';
	let isThinking = false;
	let hasResponseStarted = false;
	let messageDiv = null;
	let currentThinkingWidget = null;

	const reader = response.body.getReader();
	const decoder = new TextDecoder();

	while (true) {
	const { done, value } = await reader.read();
	if (done) break;

	const chunk = decoder.decode(value, { stream: true });
	const lines = chunk.split('\n').filter(line => line.trim());

	for (const line of lines) {
	if (line.startsWith('data: ')) {
	const data = line.slice(6);
	if (data === '[DONE]') continue;

	try {
	const parsed = JSON.parse(data);
	const content = parsed.choices[0]?.delta?.content \|\| '';
	if (content) {
	assistantResponse += content;
	const thinkStart = assistantResponse.indexOf('<think>');
	const thinkEnd = assistantResponse.indexOf('</think>');

	if (enableThinking && thinkStart !== -1 && thinkEnd === -1) {
	isThinking = true;
	thinkingContent = assistantResponse.slice(thinkStart + 7);
	if (!currentThinkingWidget) {
	currentThinkingWidget = addThinkingWidget(thinkingContent, true);
	} else {
	const div = currentThinkingWidget.querySelector('.thinking-content');
	div.innerHTML = marked.parse(thinkingContent);
	}
	}
	else if (enableThinking && thinkStart !== -1 && thinkEnd !== -1) {
	isThinking = false;
	thinkingContent = assistantResponse.slice(thinkStart + 7, thinkEnd);
	finalAnswer = assistantResponse.slice(thinkEnd + 8);

	if (currentThinkingWidget) {
	const div = currentThinkingWidget.querySelector('.thinking-content');
	div.innerHTML = marked.parse(thinkingContent);
	}
	if (!hasResponseStarted) {
	messageDiv = addMessage(finalAnswer, 'assistant');
	hasResponseStarted = true;
	} else {
	messageDiv.innerHTML = marked.parse(finalAnswer);
	}
	}
	else if (isThinking) {
	thinkingContent = assistantResponse.slice(assistantResponse.indexOf('<think>') + 7);
	if (currentThinkingWidget) {
	const div = currentThinkingWidget.querySelector('.thinking-content');
	div.innerHTML = marked.parse(thinkingContent);
	}
	}
	else {
	finalAnswer = assistantResponse;
	if (!hasResponseStarted) {
	messageDiv = addMessage('', 'assistant');
	hasResponseStarted = true;
	}
	messageDiv.innerHTML = marked.parse(finalAnswer);
	}
	}
	} catch (e) { console.error('Error parsing chunk:', e); }
	}
	}
	}

	const assistantMsg = {
	role: "assistant",
	content: finalAnswer \|\| assistantResponse,
	thinkingContent: enableThinking ? thinkingContent : null
	};
	messages.push(assistantMsg);
	chat.messages.push(assistantMsg);
	saveConversations();
	updateChatTitleAndPreview(finalAnswer \|\| assistantResponse);

	if (isThinking && !finalAnswer.trim()) {
	if (!currentThinkingWidget) currentThinkingWidget = addThinkingWidget(thinkingContent, true);
	if (!hasResponseStarted) messageDiv = addMessage('No final answer provided.', 'assistant');
	else messageDiv.innerHTML = marked.parse('No final answer provided.');
	} else if (!finalAnswer.trim() && !thinkingContent) {
	if (!hasResponseStarted) addMessage('No response received.', 'assistant');
	else messageDiv.innerHTML = marked.parse('No response received.');
	}

	} catch (error) {
	console.error('Error:', error);
	addMessage('Error communicating with the server.', 'assistant');
	} finally {
	sendButton.disabled = false;
	userInput.disabled = false;
	sendButton.innerHTML = '<i class="fas fa-paper-plane"></i> Send';
	userInput.focus();
	}
	}

	sendButton.addEventListener('click', sendMessage);
	userInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter' && !sendButton.disabled) sendMessage();
	});

	document.addEventListener('click', (e) => {
	if (window.innerWidth <= 768 && !e.target.closest('.sidebar')) {
	document.getElementById('sidebar').classList.remove('open');
	}
	});

	// Handle suggested question clicks
	document.addEventListener('click', function(e) {
	if (e.target.classList.contains('suggestion-btn')) {
	userInput.value = e.target.textContent;
	userInput.focus();
	}
	});
	init();
	</script>
	</body>
	</html>