| <!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; |
| } |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| border: 1px solid var(--border); |
| } |
| |
| th, td { |
| padding: 8px 12px; |
| text-align: left; |
| border: 1px solid var(--border); |
| } |
| |
| 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 { |
| 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> |
|
|
| |
| <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> |
| |
| <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'; |
| |
| 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'; |
| |
| |
| const schoolButtons = document.querySelectorAll('.school-btn'); |
| schoolButtons.forEach(btn => { |
| btn.addEventListener('click', () => { |
| const school = btn.dataset.school; |
| |
| |
| if (currentSchool === school) return; |
| |
| |
| schoolButtons.forEach(b => b.classList.remove('active')); |
| btn.classList.add('active'); |
| |
| |
| 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; |
| |
| |
| chat.messages = chat.messages.filter(m => m.role !== 'system'); |
| messages = messages.filter(m => m.role !== 'system'); |
| |
| |
| const sysMsg = { role: 'system', content: newSysPrompt }; |
| chat.messages.unshift(sysMsg); |
| messages.unshift(sysMsg); |
| |
| saveConversations(); |
| addMessage(`*Context switched to **${school}***`, 'assistant'); |
| |
| currentSchool = school; |
| }); |
| }); |
| |
| 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(); |
| |
| |
| 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'; |
| |
| |
| 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 = ''; |
| |
| |
| 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'; |
| } |
| |
| |
| 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'); |
| } |
| }); |
| |
| |
| document.addEventListener('click', function(e) { |
| if (e.target.classList.contains('suggestion-btn')) { |
| userInput.value = e.target.textContent; |
| userInput.focus(); |
| } |
| }); |
| init(); |
| </script> |
| </body> |
| </html> |
