| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CogniChat - Chat with your Documents</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
| <style> |
| |
| |
| |
| :root { |
| |
| --bg-primary: #ffffff; |
| --bg-secondary: #f5f5f5; |
| --bg-tertiary: #e8e8e8; |
| |
| --text-primary: #1a1a1a; |
| --text-secondary: #4a4a4a; |
| --text-tertiary: #6a6a6a; |
| |
| --border-color: #d0d0d0; |
| --border-hover: #a0a0a0; |
| |
| --accent-primary: #007bff; |
| --accent-hover: #0056b3; |
| --accent-active: #004085; |
| |
| --success-color: #28a745; |
| --error-color: #dc3545; |
| --warning-color: #ffc107; |
| --info-color: #17a2b8; |
| |
| --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); |
| --shadow-md: 0 4px 6px rgba(0,0,0,0.1); |
| --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); |
| |
| --transition-speed: 0.3s; |
| |
| |
| --code-bg: #f6f8fa; |
| --code-text: #24292f; |
| --code-comment: #6e7781; |
| --code-keyword: #cf222e; |
| --code-string: #0a3069; |
| } |
| |
| |
| [data-theme="dark"] { |
| --bg-primary: #1a1a1a; |
| --bg-secondary: #2d2d2d; |
| --bg-tertiary: #3a3a3a; |
| |
| --text-primary: #e8e8e8; |
| --text-secondary: #b8b8b8; |
| --text-tertiary: #888888; |
| |
| --border-color: #404040; |
| --border-hover: #606060; |
| |
| --accent-primary: #4a9eff; |
| --accent-hover: #6bb0ff; |
| --accent-active: #2d7fdb; |
| |
| --success-color: #4ade80; |
| --error-color: #f87171; |
| --warning-color: #fbbf24; |
| --info-color: #38bdf8; |
| |
| --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); |
| --shadow-md: 0 4px 6px rgba(0,0,0,0.4); |
| --shadow-lg: 0 10px 15px rgba(0,0,0,0.5); |
| |
| |
| --code-bg: #161b22; |
| --code-text: #c9d1d9; |
| --code-comment: #8b949e; |
| --code-keyword: #ff7b72; |
| --code-string: #a5d6ff; |
| } |
| |
| body { |
| font-family: 'Google Sans', 'Roboto', sans-serif; |
| background-color: var(--bg-primary); |
| color: var(--text-primary); |
| overflow: hidden; |
| transition: background-color var(--transition-speed), color var(--transition-speed); |
| } |
| |
| |
| #chat-container, |
| #upload-container { |
| background-color: var(--bg-primary); |
| color: var(--text-primary); |
| } |
| |
| header { |
| background-color: var(--bg-primary); |
| border-color: var(--border-color) !important; |
| } |
| |
| #chat-form { |
| background-color: var(--bg-secondary); |
| border-color: var(--border-color); |
| } |
| |
| #chat-form:focus-within { |
| border-color: var(--accent-primary); |
| } |
| |
| #chat-input { |
| color: var(--text-primary); |
| } |
| |
| #chat-submit-btn { |
| background-color: var(--accent-primary); |
| } |
| |
| #chat-submit-btn:hover:not(:disabled) { |
| background-color: var(--accent-hover); |
| } |
| |
| #drop-zone { |
| background-color: var(--bg-secondary); |
| border-color: var(--border-color); |
| color: var(--text-primary); |
| } |
| |
| #drop-zone:hover { |
| border-color: var(--accent-primary); |
| } |
| |
| .loader { |
| border-color: var(--border-color); |
| } |
| |
| .loader::after { |
| border-color: var(--accent-primary) transparent; |
| } |
| |
| #chat-window::-webkit-scrollbar { width: 8px; } |
| #chat-window::-webkit-scrollbar-track { background: transparent; } |
| #chat-window::-webkit-scrollbar-thumb { |
| background-color: var(--border-hover); |
| border-radius: 20px; |
| } |
| |
| .drop-zone--over { |
| border-color: var(--accent-primary) !important; |
| box-shadow: 0 0 15px rgba(74, 158, 255, 0.3); |
| } |
| |
| |
| .loader { |
| width: 48px; |
| height: 48px; |
| border: 3px solid var(--border-color); |
| border-radius: 50%; |
| display: inline-block; |
| position: relative; |
| box-sizing: border-box; |
| animation: rotation 1s linear infinite; |
| } |
| .loader::after { |
| content: ''; |
| box-sizing: border-box; |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| transform: translate(-50%, -50%); |
| width: 56px; |
| height: 56px; |
| border-radius: 50%; |
| border: 3px solid; |
| border-color: var(--accent-primary) transparent; |
| } |
| |
| @keyframes rotation { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| |
| .typing-indicator span { |
| height: 10px; |
| width: 10px; |
| background-color: var(--text-tertiary); |
| border-radius: 50%; |
| display: inline-block; |
| animation: bounce 1.4s infinite ease-in-out both; |
| } |
| .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } |
| .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } |
| @keyframes bounce { |
| 0%, 80%, 100% { transform: scale(0); } |
| 40% { transform: scale(1.0); } |
| } |
| |
| |
| .markdown-content p { |
| margin-bottom: 0.75rem; |
| line-height: 1.75; |
| color: var(--text-primary); |
| } |
| .markdown-content ul, .markdown-content ol { |
| margin-left: 1.5rem; |
| margin-bottom: 0.75rem; |
| color: var(--text-primary); |
| } |
| .markdown-content code { |
| background-color: var(--code-bg); |
| color: var(--code-text); |
| padding: 0.2rem 0.4rem; |
| border-radius: 0.25rem; |
| font-family: 'Roboto Mono', monospace; |
| font-size: 0.9em; |
| } |
| .markdown-content pre { |
| position: relative; |
| background-color: var(--code-bg); |
| border: 1px solid var(--border-color); |
| border-radius: 0.5rem; |
| margin-bottom: 1rem; |
| } |
| .markdown-content pre code { |
| background: none; |
| padding: 1rem; |
| display: block; |
| overflow-x: auto; |
| color: var(--code-text); |
| } |
| .markdown-content pre .copy-code-btn { |
| position: absolute; |
| top: 0.5rem; |
| right: 0.5rem; |
| background-color: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| color: var(--text-primary); |
| padding: 0.3rem 0.6rem; |
| border-radius: 0.25rem; |
| cursor: pointer; |
| opacity: 0; |
| transition: opacity 0.2s; |
| font-size: 0.8em; |
| } |
| .markdown-content pre:hover .copy-code-btn { opacity: 1; } |
| |
| |
| .tts-button-loader { |
| width: 16px; |
| height: 16px; |
| border: 2px solid currentColor; |
| border-radius: 50%; |
| display: inline-block; |
| box-sizing: border-box; |
| animation: rotation 0.8s linear infinite; |
| border-bottom-color: transparent; |
| } |
| |
| |
| .theme-toggle-btn { |
| position: fixed; |
| top: 1rem; |
| right: 1rem; |
| background-color: var(--bg-secondary); |
| border: 1px solid var(--border-color); |
| color: var(--text-primary); |
| padding: 0.5rem; |
| border-radius: 0.5rem; |
| cursor: pointer; |
| transition: all var(--transition-speed); |
| z-index: 100; |
| box-shadow: var(--shadow-md); |
| } |
| |
| .theme-toggle-btn:hover { |
| background-color: var(--bg-tertiary); |
| border-color: var(--accent-primary); |
| transform: scale(1.05); |
| } |
| |
| .theme-toggle-btn svg { |
| width: 1.25rem; |
| height: 1.25rem; |
| } |
| </style> |
| |
| |
| <script> |
| (function() { |
| const savedTheme = localStorage.getItem('cognichat_theme'); |
| const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; |
| const theme = savedTheme || (prefersDark ? 'dark' : 'light'); |
| document.documentElement.setAttribute('data-theme', theme); |
| })(); |
| </script> |
| </head> |
| <body class="w-screen h-screen"> |
| |
| <button |
| id="theme-toggle" |
| class="theme-toggle-btn" |
| onclick="toggleTheme()" |
| aria-label="Toggle theme" |
| title="Toggle dark/light mode" |
| > |
| <svg id="theme-icon-sun" class="hidden" fill="currentColor" viewBox="0 0 24 24"> |
| <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/> |
| </svg> |
| <svg id="theme-icon-moon" class="" fill="currentColor" viewBox="0 0 24 24"> |
| <path d="M9 2c-1.05 0-2.05.16-3 .46 4.06 1.27 7 5.06 7 9.54 0 4.48-2.94 8.27-7 9.54.95.3 1.95.46 3 .46 5.52 0 10-4.48 10-10S14.52 2 9 2z"/> |
| </svg> |
| </button> |
| |
| <main id="main-content" class="h-full flex flex-col transition-opacity duration-500"> |
| <div id="chat-container" class="hidden flex-1 flex flex-col w-full mx-auto overflow-hidden"> |
| <header class="text-center p-4 border-b border-[var(--card-border)] flex-shrink-0"> |
| <h1 class="text-xl font-medium">Chat with your Docs</h1> |
| <p id="chat-filename" class="text-xs text-gray-500 dark:text-gray-400 mt-1"></p> |
| </header> |
| <div id="chat-window" class="flex-1 overflow-y-auto p-4 md:p-6 lg:p-10"> |
| <div id="chat-content" class="max-w-4xl mx-auto space-y-8"> |
| </div> |
| </div> |
| <div class="p-4 flex-shrink-0 bg-[var(--background)] border-t border-[var(--card-border)]"> |
| <form id="chat-form" class="max-w-4xl mx-auto bg-[var(--card)] rounded-full p-2 flex items-center shadow-sm border border-transparent focus-within:border-[var(--primary)] transition-colors"> |
| <input type="text" id="chat-input" placeholder="Ask a question about your documents..." class="flex-grow bg-transparent focus:outline-none px-4 text-sm" autocomplete="off"> |
| <button type="submit" id="chat-submit-btn" class="bg-[var(--primary)] hover:bg-[var(--primary-hover)] text-white p-2 rounded-full transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-500" title="Send"> |
| <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.49941 11.5556L11.555 3.5L12.4438 4.38889L6.27721 10.5556H21.9994V11.5556H6.27721L12.4438 17.7222L11.555 18.6111L3.49941 10.5556V11.5556Z" transform="rotate(180, 12.7497, 11.0556)" fill="currentColor"></path></svg> |
| </button> |
| </form> |
| </div> |
| </div> |
|
|
| <div id="upload-container" class="flex-1 flex flex-col items-center justify-center p-8 transition-opacity duration-300"> |
| <div class="text-center"> |
| <h1 class="text-5xl font-medium mb-4">Upload docs to chat</h1> |
| <div id="drop-zone" class="w-full max-w-lg text-center border-2 border-dashed border-[var(--card-border)] rounded-2xl p-10 transition-all duration-300 cursor-pointer bg-[var(--card)] hover:border-[var(--primary)]"> |
| <input id="file-upload" type="file" class="hidden" accept=".pdf,.txt,.docx,.jpg,.jpeg,.png" multiple title="input"> |
| <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" ><path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3-3m-3 3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"></path></svg> |
| <p class="mt-4 text-sm font-medium">Drag & drop files or click to upload</p> |
| <p id="file-name" class="mt-2 text-xs text-gray-500"></p> |
| </div> |
| </div> |
| </div> |
| |
| <div id="loading-overlay" class="hidden fixed inset-0 bg-[var(--background)] bg-opacity-80 backdrop-blur-sm flex flex-col items-center justify-center z-50 text-center p-4"> |
| <div class="loader"></div> |
| <p id="loading-text" class="mt-6 text-sm font-medium"></p> |
| <p id="loading-subtext" class="mt-2 text-xs text-gray-500 dark:text-gray-400"></p> |
| </div> |
| </main> |
|
|
| <script> |
| |
| |
| |
| class ThemeManager { |
| constructor() { |
| this.theme = this.getStoredTheme() || this.getPreferredTheme(); |
| this.init(); |
| } |
| |
| init() { |
| |
| this.applyTheme(this.theme); |
| |
| |
| window.matchMedia('(prefers-color-scheme: dark)') |
| .addEventListener('change', (e) => { |
| if (!this.hasStoredTheme()) { |
| this.applyTheme(e.matches ? 'dark' : 'light'); |
| } |
| }); |
| } |
| |
| getPreferredTheme() { |
| |
| return window.matchMedia('(prefers-color-scheme: dark)').matches |
| ? 'dark' |
| : 'light'; |
| } |
| |
| getStoredTheme() { |
| return localStorage.getItem('cognichat_theme'); |
| } |
| |
| hasStoredTheme() { |
| return localStorage.getItem('cognichat_theme') !== null; |
| } |
| |
| applyTheme(theme) { |
| document.documentElement.setAttribute('data-theme', theme); |
| this.theme = theme; |
| this.updateToggleButton(); |
| } |
| |
| toggleTheme() { |
| const newTheme = this.theme === 'light' ? 'dark' : 'light'; |
| this.applyTheme(newTheme); |
| localStorage.setItem('cognichat_theme', newTheme); |
| } |
| |
| updateToggleButton() { |
| const sunIcon = document.getElementById('theme-icon-sun'); |
| const moonIcon = document.getElementById('theme-icon-moon'); |
| const button = document.getElementById('theme-toggle'); |
| |
| if (sunIcon && moonIcon && button) { |
| if (this.theme === 'light') { |
| sunIcon.classList.add('hidden'); |
| moonIcon.classList.remove('hidden'); |
| button.setAttribute('aria-label', 'Switch to dark mode'); |
| } else { |
| sunIcon.classList.remove('hidden'); |
| moonIcon.classList.add('hidden'); |
| button.setAttribute('aria-label', 'Switch to light mode'); |
| } |
| } |
| } |
| } |
| |
| |
| const themeManager = new ThemeManager(); |
| |
| |
| function toggleTheme() { |
| themeManager.toggleTheme(); |
| } |
| |
| |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const uploadContainer = document.getElementById('upload-container'); |
| const chatContainer = document.getElementById('chat-container'); |
| const dropZone = document.getElementById('drop-zone'); |
| const fileUploadInput = document.getElementById('file-upload'); |
| const fileNameSpan = document.getElementById('file-name'); |
| const loadingOverlay = document.getElementById('loading-overlay'); |
| const loadingText = document.getElementById('loading-text'); |
| const loadingSubtext = document.getElementById('loading-subtext'); |
| |
| const chatForm = document.getElementById('chat-form'); |
| const chatInput = document.getElementById('chat-input'); |
| const chatSubmitBtn = document.getElementById('chat-submit-btn'); |
| const chatWindow = document.getElementById('chat-window'); |
| const chatContent = document.getElementById('chat-content'); |
| const chatFilename = document.getElementById('chat-filename'); |
| |
| |
| let sessionId = null; |
| const storedSessionId = sessionStorage.getItem('cognichat_session_id'); |
| if (storedSessionId) { |
| sessionId = storedSessionId; |
| console.debug('Restored session ID from storage:', sessionId); |
| } |
| |
| |
| dropZone.addEventListener('click', () => fileUploadInput.click()); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropZone.addEventListener(eventName, preventDefaults, false); |
| document.body.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropZone.addEventListener(eventName, () => dropZone.classList.add('drop-zone--over')); |
| }); |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropZone.addEventListener(eventName, () => dropZone.classList.remove('drop-zone--over')); |
| }); |
| |
| dropZone.addEventListener('drop', (e) => { |
| const files = e.dataTransfer.files; |
| if (files.length > 0) handleFiles(files); |
| }); |
| |
| fileUploadInput.addEventListener('change', (e) => { |
| if (e.target.files.length > 0) handleFiles(e.target.files); |
| }); |
| |
| function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } |
| |
| async function handleFiles(files) { |
| const formData = new FormData(); |
| let fileNames = []; |
| for (const file of files) { |
| formData.append('file', file); |
| fileNames.push(file.name); |
| } |
| |
| fileNameSpan.textContent = `Selected: ${fileNames.join(', ')}`; |
| await uploadAndProcessFiles(formData, fileNames); |
| } |
| |
| async function uploadAndProcessFiles(formData, fileNames) { |
| loadingOverlay.classList.remove('hidden'); |
| loadingText.textContent = `Processing ${fileNames.length} document(s)...`; |
| loadingSubtext.textContent = "For large documents or OCR, setup may take a few minutes to build the knowledge base."; |
| |
| try { |
| const response = await fetch('/upload', { method: 'POST', body: formData }); |
| const result = await response.json(); |
| |
| if (!response.ok) throw new Error(result.message || 'Unknown error occurred.'); |
| if (result.session_id) { |
| sessionId = result.session_id; |
| sessionStorage.setItem('cognichat_session_id', sessionId); |
| console.debug('Stored session ID from upload:', sessionId); |
| } else { |
| console.warn('Upload response missing session_id field.'); |
| } |
| |
| chatFilename.textContent = `Chatting with: ${result.filename}`; |
| uploadContainer.classList.add('hidden'); |
| chatContainer.classList.remove('hidden'); |
| appendMessage("I've analyzed your documents. What would you like to know?", "bot"); |
| |
| } catch (error) { |
| console.error('Upload error:', error); |
| alert(`Error: ${error.message}`); |
| } finally { |
| loadingOverlay.classList.add('hidden'); |
| loadingSubtext.textContent = ''; |
| fileNameSpan.textContent = ''; |
| fileUploadInput.value = ''; |
| } |
| } |
| |
| |
| chatForm.addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| const question = chatInput.value.trim(); |
| if (!question) return; |
| |
| appendMessage(question, 'user'); |
| chatInput.value = ''; |
| chatInput.disabled = true; |
| chatSubmitBtn.disabled = true; |
| |
| const typingIndicator = showTypingIndicator(); |
| let botMessageContainer = null; |
| let contentDiv = null; |
| |
| try { |
| const requestBody = { question: question }; |
| if (sessionId) { |
| requestBody.session_id = sessionId; |
| } |
| |
| const response = await fetch('/chat', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify(requestBody), |
| }); |
| |
| if (!response.ok) throw new Error(`Server error: ${response.statusText}`); |
| |
| typingIndicator.remove(); |
| botMessageContainer = appendMessage('', 'bot'); |
| contentDiv = botMessageContainer.querySelector('.markdown-content'); |
| |
| const reader = response.body.getReader(); |
| const decoder = new TextDecoder(); |
| let fullResponse = ''; |
| |
| while (true) { |
| const { value, done } = await reader.read(); |
| if (done) break; |
| |
| fullResponse += decoder.decode(value, { stream: true }); |
| contentDiv.innerHTML = marked.parse(fullResponse); |
| scrollToBottom(); |
| } |
| contentDiv.querySelectorAll('pre').forEach(addCopyButton); |
| |
| addTextToSpeechControls(botMessageContainer, fullResponse); |
| |
| } catch (error) { |
| console.error('Chat error:', error); |
| if (typingIndicator) typingIndicator.remove(); |
| if (contentDiv) { |
| contentDiv.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`; |
| } else { |
| appendMessage(`Error: ${error.message}`, 'bot'); |
| } |
| } finally { |
| chatInput.disabled = false; |
| chatSubmitBtn.disabled = false; |
| chatInput.focus(); |
| } |
| }); |
| |
| |
| |
| function appendMessage(text, sender) { |
| const messageWrapper = document.createElement('div'); |
| messageWrapper.className = `flex items-start gap-4`; |
| |
| const iconSVG = sender === 'user' |
| ? `<div class="bg-blue-100 dark:bg-gray-700 p-2.5 rounded-full flex-shrink-0 mt-1"><svg class="w-5 h-5 text-blue-600 dark:text-blue-300" viewBox="0 0 24 24"><path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg></div>` |
| : `<div class="bg-gray-200 dark:bg-gray-700 rounded-full flex-shrink-0 mt-1 text-xl flex items-center justify-center w-10 h-10">✨</div>`; |
| |
| const messageBubble = document.createElement('div'); |
| messageBubble.className = `flex-1 pt-1`; |
| |
| const senderName = document.createElement('p'); |
| senderName.className = 'font-medium text-sm mb-1'; |
| senderName.textContent = sender === 'user' ? 'You' : 'CogniChat'; |
| |
| const contentDiv = document.createElement('div'); |
| contentDiv.className = 'text-base markdown-content'; |
| contentDiv.innerHTML = marked.parse(text); |
| |
| const controlsContainer = document.createElement('div'); |
| controlsContainer.className = 'tts-controls mt-2'; |
| |
| messageBubble.appendChild(senderName); |
| messageBubble.appendChild(contentDiv); |
| messageBubble.appendChild(controlsContainer); |
| messageWrapper.innerHTML = iconSVG; |
| messageWrapper.appendChild(messageBubble); |
| |
| chatContent.appendChild(messageWrapper); |
| scrollToBottom(); |
| |
| return messageBubble; |
| } |
| |
| function showTypingIndicator() { |
| const indicatorWrapper = document.createElement('div'); |
| indicatorWrapper.className = `flex items-start gap-4`; |
| indicatorWrapper.id = 'typing-indicator'; |
| |
| const iconSVG = `<div class="bg-gray-200 dark:bg-gray-700 rounded-full flex-shrink-0 mt-1 text-xl flex items-center justify-center w-10 h-10">✨</div>`; |
| |
| const messageBubble = document.createElement('div'); |
| messageBubble.className = 'flex-1 pt-1'; |
| |
| const senderName = document.createElement('p'); |
| senderName.className = 'font-medium text-sm mb-1'; |
| senderName.textContent = 'CogniChat is thinking...'; |
| |
| const indicator = document.createElement('div'); |
| indicator.className = 'typing-indicator'; |
| indicator.innerHTML = '<span></span><span></span><span></span>'; |
| |
| messageBubble.appendChild(senderName); |
| messageBubble.appendChild(indicator); |
| indicatorWrapper.innerHTML = iconSVG; |
| indicatorWrapper.appendChild(messageBubble); |
| |
| chatContent.appendChild(indicatorWrapper); |
| scrollToBottom(); |
| |
| return indicatorWrapper; |
| } |
| |
| function scrollToBottom() { |
| chatWindow.scrollTo({ |
| top: chatWindow.scrollHeight, |
| behavior: 'smooth' |
| }); |
| } |
| |
| function addCopyButton(pre) { |
| const button = document.createElement('button'); |
| button.className = 'copy-code-btn'; |
| button.textContent = 'Copy'; |
| pre.appendChild(button); |
| |
| button.addEventListener('click', () => { |
| const code = pre.querySelector('code').innerText; |
| navigator.clipboard.writeText(code).then(() => { |
| button.textContent = 'Copied!'; |
| setTimeout(() => button.textContent = 'Copy', 2000); |
| }); |
| }); |
| } |
| |
| |
| let currentAudio = null; |
| let currentPlayingButton = null; |
| |
| const playIconSVG = `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>`; |
| const pauseIconSVG = `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>`; |
| |
| |
| function addTextToSpeechControls(messageBubble, text) { |
| const ttsControls = messageBubble.querySelector('.tts-controls'); |
| if (text.trim().length > 0) { |
| const speakButton = document.createElement('button'); |
| |
| speakButton.className = 'speak-btn px-4 py-2 bg-blue-700 text-white rounded-full text-sm font-medium hover:bg-blue-800 transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed'; |
| speakButton.title = 'Listen to this message'; |
| speakButton.setAttribute('data-state', 'play'); |
| speakButton.innerHTML = `${playIconSVG} <span>Play</span>`; |
| ttsControls.appendChild(speakButton); |
| speakButton.addEventListener('click', () => handleTTS(text, speakButton)); |
| } |
| } |
| |
| async function handleTTS(text, button) { |
| |
| |
| |
| if (button === currentPlayingButton) { |
| if (currentAudio && !currentAudio.paused) { |
| currentAudio.pause(); |
| button.setAttribute('data-state', 'paused'); |
| button.innerHTML = `${playIconSVG} <span>Play</span>`; |
| } else if (currentAudio && currentAudio.paused) { |
| currentAudio.play(); |
| button.setAttribute('data-state', 'playing'); |
| button.innerHTML = `${pauseIconSVG} <span>Pause</span>`; |
| } |
| return; |
| } |
| |
| |
| |
| resetAllSpeakButtons(); |
| |
| currentPlayingButton = button; |
| button.setAttribute('data-state', 'loading'); |
| button.innerHTML = `<div class="tts-button-loader"></div> <span>Loading...</span>`; |
| button.disabled = true; |
| |
| try { |
| const response = await fetch('/tts', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ text: text }) |
| }); |
| if (!response.ok) throw new Error('Failed to generate audio.'); |
| |
| const blob = await response.blob(); |
| const audioUrl = URL.createObjectURL(blob); |
| currentAudio = new Audio(audioUrl); |
| currentAudio.play(); |
| |
| button.setAttribute('data-state', 'playing'); |
| button.innerHTML = `${pauseIconSVG} <span>Pause</span>`; |
| |
| currentAudio.onended = () => { |
| button.setAttribute('data-state', 'play'); |
| button.innerHTML = `${playIconSVG} <span>Play</span>`; |
| currentAudio = null; |
| currentPlayingButton = null; |
| }; |
| |
| } catch (error) { |
| console.error('TTS Error:', error); |
| button.setAttribute('data-state', 'error'); |
| button.innerHTML = `${playIconSVG} <span>Error</span>`; |
| alert('Failed to play audio. Please try again.'); |
| resetAllSpeakButtons(); |
| } finally { |
| button.disabled = false; |
| } |
| } |
| |
| function resetAllSpeakButtons() { |
| document.querySelectorAll('.speak-btn').forEach(btn => { |
| btn.setAttribute('data-state', 'play'); |
| btn.innerHTML = `${playIconSVG} <span>Play</span>`; |
| btn.disabled = false; |
| }); |
| if (currentAudio) { |
| currentAudio.pause(); |
| currentAudio = null; |
| } |
| currentPlayingButton = null; |
| } |
| |
| }); |
| </script> |
| </body> |
| </html><!DOCTYPE html> |
|
|
