Spaces:
No application file
No application file
| <html><head><base href=""><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Minimalist Chat Interface</title><style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap'); | |
| :root { | |
| --bg-color: #000000; | |
| --text-color: #ffffff; | |
| --border-color: #222222; | |
| --input-bg: #0a0a0a; | |
| --accent-color: #111111; | |
| --menu-bg: #050505; | |
| --hover-color: #1a1a1a; | |
| --popup-bg: rgba(10, 10, 10, 0.95); | |
| --mint-green: #98FB98; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| cursor: url('cursor.png'), auto ; | |
| } | |
| body, html { | |
| height: 100%; | |
| font-family: 'Poppins', Arial, sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| overflow: hidden; | |
| user-select: none; | |
| } | |
| .chat-container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| width: 100vw; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .chat-messages { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--accent-color) var(--bg-color); | |
| } | |
| .chat-messages::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .chat-messages::-webkit-scrollbar-track { | |
| background: var(--bg-color); | |
| } | |
| .chat-messages::-webkit-scrollbar-thumb { | |
| background-color: var(--accent-color); | |
| border-radius: 6px; | |
| } | |
| .message { | |
| max-width: 80%; | |
| margin-bottom: 1.5rem; | |
| padding: 1rem; | |
| border-radius: 0.8rem; | |
| line-height: 1.4; | |
| position: relative; | |
| word-wrap: break-word; | |
| font-size: 0.9rem; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--border-color); | |
| } | |
| .user-message { | |
| align-self: flex-end; | |
| background-color: var(--accent-color); | |
| color: var(--text-color); | |
| } | |
| .ai-message { | |
| align-self: flex-start; | |
| background-color: var(--input-bg); | |
| color: var(--text-color); | |
| user-select: text; | |
| } | |
| .ai-message *::selection { | |
| background-color: #98FB98; | |
| color: #000000; | |
| } | |
| .chat-input { | |
| display: flex; | |
| justify-content: center; | |
| padding: 1.2rem; | |
| background-color: var(--bg-color); | |
| border-top: 1px solid var(--border-color); | |
| position: sticky; | |
| bottom: 0; | |
| } | |
| .chat-input-wrapper { | |
| display: flex; | |
| width: 50%; | |
| background-color: var(--input-bg); | |
| border-radius: 1.5rem; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .chat-input textarea { | |
| flex-grow: 1; | |
| padding: 0.8rem 1.2rem; | |
| border: none; | |
| font-size: 0.9rem; | |
| font-family: 'Poppins', Arial, sans-serif; | |
| background-color: transparent; | |
| color: var(--text-color); | |
| resize: none; | |
| min-height: 20px; | |
| max-height: 150px; | |
| transition: all 0.3s ease; | |
| } | |
| .chat-input textarea:focus { | |
| outline: none; | |
| } | |
| .chat-input textarea::selection { | |
| background-color: var(--mint-green); | |
| color: #000000; | |
| } | |
| .send-btn { | |
| background-color: var(--accent-color); | |
| border: none; | |
| color: var(--text-color); | |
| font-size: 1rem; | |
| padding: 0.6rem 1.2rem; | |
| transition: all 0.3s ease; | |
| border-radius: 0 1.5rem 1.5rem 0; | |
| } | |
| .send-btn:hover { | |
| background-color: var(--hover-color); | |
| } | |
| /* Menu Button Styles */ | |
| .menu-btn { | |
| position: fixed; | |
| top: 1rem; | |
| left: 1rem; | |
| background: none; | |
| border: none; | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| } | |
| .menu-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .menu-btn svg { | |
| width: 20px; | |
| height: 20px; | |
| fill: var(--text-color); | |
| } | |
| /* Conversation Menu Styles */ | |
| .conversation-menu { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 280px; | |
| height: 100%; | |
| background-color: var(--menu-bg); | |
| transition: transform 0.3s ease; | |
| overflow-y: auto; | |
| padding: 1.5rem; | |
| box-shadow: 2px 0 15px rgba(0,0,0,0.3); | |
| z-index: 999; | |
| transform: translateX(-100%); | |
| } | |
| .conversation-menu.open { | |
| transform: translateX(0); | |
| } | |
| .conversation-list { | |
| list-style-type: none; | |
| margin-top: 1.5rem; | |
| user-select: none; | |
| } | |
| .conversation-item { | |
| padding: 0.8rem; | |
| margin-bottom: 0.4rem; | |
| background-color: var(--input-bg); | |
| border-radius: 0.4rem; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| font-size: 0.9rem; | |
| } | |
| .conversation-item:hover { | |
| background-color: var(--hover-color); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); | |
| } | |
| .menu-header { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .menu-title { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: var(--text-color); | |
| } | |
| .menu-actions { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| } | |
| .menu-btn-action { | |
| background-color: var(--accent-color); | |
| border: none; | |
| color: var(--text-color); | |
| padding: 0.6rem 1rem; | |
| border-radius: 1.5rem; | |
| transition: all 0.3s ease; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .menu-btn-action:hover { | |
| background-color: var(--hover-color); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1); | |
| } | |
| /* Context Menu Styles */ | |
| .context-menu { | |
| position: fixed; | |
| background-color: var(--popup-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.4rem; | |
| padding: 0.5rem 0; | |
| z-index: 1000; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(10px); | |
| } | |
| .context-menu-item { | |
| padding: 0.5rem 1rem; | |
| transition: background-color 0.2s ease; | |
| } | |
| .context-menu-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| /* Popup Styles */ | |
| .popup { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) scale(0.9); | |
| background-color: var(--popup-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.8rem; | |
| padding: 1.5rem; | |
| z-index: 1001; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); | |
| max-width: 90%; | |
| width: 300px; | |
| backdrop-filter: blur(15px); | |
| transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| .popup.active { | |
| transform: translate(-50%, -50%) scale(1); | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .popup-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 1rem; | |
| text-align: center; | |
| color: var(--text-color); | |
| } | |
| .popup-input { | |
| width: 100%; | |
| padding: 0.5rem; | |
| margin-bottom: 1rem; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border: 1px solid var(--border-color); | |
| color: var(--text-color); | |
| border-radius: 0.3rem; | |
| transition: all 0.3s ease; | |
| } | |
| .popup-input:focus { | |
| outline: none; | |
| background-color: rgba(255, 255, 255, 0.2); | |
| border-color: var(--text-color); | |
| } | |
| .popup-input::selection { | |
| background-color: var(--mint-green); | |
| color: #000000; | |
| } | |
| .popup-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .popup-btn { | |
| padding: 0.5rem 1rem; | |
| margin-left: 0.5rem; | |
| border: none; | |
| border-radius: 0.3rem; | |
| transition: all 0.3s ease; | |
| font-weight: bold; | |
| } | |
| .popup-btn-cancel { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: var(--text-color); | |
| } | |
| .popup-btn-confirm { | |
| background-color: var(--accent-color); | |
| color: var(--text-color); | |
| } | |
| .popup-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| } | |
| .overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| z-index: 1000; | |
| backdrop-filter: blur(5px); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| @media (max-width: 768px) { | |
| .chat-messages { | |
| padding: 1rem; | |
| } | |
| .message { | |
| max-width: 90%; | |
| font-size: 0.85rem; | |
| } | |
| .chat-input { | |
| padding: 0.8rem; | |
| } | |
| .chat-input-wrapper { | |
| width: 90%; | |
| } | |
| .conversation-menu { | |
| width: 100%; | |
| } | |
| } | |
| /* Ensure the cursor is always the custom cursor */ | |
| * { | |
| cursor: url('./image/cursor.png'), auto ; | |
| } | |
| /* Override cursor for text inputs and textareas */ | |
| input[type="text"], textarea { | |
| cursor: url('cursor.png'), text ; | |
| } | |
| /* Hide the default text cursor */ | |
| input[type="text"], textarea { | |
| caret-color: transparent; | |
| } | |
| /* Create a custom caret using a pseudo-element */ | |
| input[type="text"]::after, textarea::after { | |
| content: '|'; | |
| position: absolute; | |
| color: var(--text-color); | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .message pre { | |
| background-color: #1e1e1e; | |
| border-radius: 4px; | |
| padding: 10px; | |
| overflow-x: auto; | |
| } | |
| .message code { | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 0.9em; | |
| } | |
| .message ul, .message ol { | |
| margin-left: 20px; | |
| } | |
| .message p { | |
| margin-bottom: 10px; | |
| } | |
| textarea { | |
| cursor: url('./image/cursor.png'), text ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <button class="menu-btn" id="menuBtn" aria-label="Open conversation menu"> | |
| <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> | |
| </svg> | |
| </button> | |
| <div class="chat-messages" id="chatMessages"></div> | |
| <form id="chatForm" class="chat-input"> | |
| <div class="chat-input-wrapper"> | |
| <textarea id="userInput" placeholder="" spellcheck="false"autocomplete="off" aria-label="Chat input" required></textarea> | |
| <button type="submit" class="send-btn"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M2 21L23 12L2 3V10L17 12L2 14V21Z" fill="currentColor"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="conversation-menu" id="conversationMenu"> | |
| <div class="menu-header"> | |
| <h2 class="menu-title">CONVERSATIONS</h2> | |
| </div> | |
| <div class="menu-actions"> | |
| <button class="menu-btn-action" id="newConversationBtn">New Conversation</button> | |
| </div> | |
| <ul class="conversation-list" id="conversationList"> | |
| <!-- Conversation items will be dynamically added here --> | |
| </ul> | |
| </div> | |
| <div id="contextMenu" class="context-menu" style="display: none;"> | |
| <div class="context-menu-item" id="renameConversation">Rename</div> | |
| <div class="context-menu-item" id="deleteConversation">Delete</div> | |
| </div> | |
| <div id="overlay" class="overlay"></div> | |
| <div id="renamePopup" class="popup"> | |
| <h3 class="popup-title">Rename Conversation</h3> | |
| <input type="text" id="renameInput" class="popup-input" placeholder="New name"spellcheck="false"autocomplete="off"> | |
| <div class="popup-actions"> | |
| <button id="cancelRename" class="popup-btn popup-btn-cancel">Cancel</button> | |
| <button id="confirmRename" class="popup-btn popup-btn-confirm">Rename</button> | |
| </div> | |
| </div> | |
| <div id="deletePopup" class="popup"> | |
| <h3 class="popup-title">Delete Conversation</h3> | |
| <div class="popup-actions"> | |
| <button id="cancelDelete" class="popup-btn popup-btn-cancel">Cancel</button> | |
| <button id="confirmDelete" class="popup-btn popup-btn-confirm">Delete</button> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <script> | |
| // Sélection des éléments du DOM | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const chatForm = document.getElementById('chatForm'); | |
| const userInput = document.getElementById('userInput'); | |
| const menuBtn = document.getElementById('menuBtn'); | |
| const conversationMenu = document.getElementById('conversationMenu'); | |
| const conversationList = document.getElementById('conversationList'); | |
| const newConversationBtn = document.getElementById('newConversationBtn'); | |
| const contextMenu = document.getElementById('contextMenu'); | |
| const renameConversationBtn = document.getElementById('renameConversation'); | |
| const deleteConversationBtn = document.getElementById('deleteConversation'); | |
| const renamePopup = document.getElementById('renamePopup'); | |
| const deletePopup = document.getElementById('deletePopup'); | |
| const renameInput = document.getElementById('renameInput'); | |
| const confirmRenameBtn = document.getElementById('confirmRename'); | |
| const cancelRenameBtn = document.getElementById('cancelRename'); | |
| const confirmDeleteBtn = document.getElementById('confirmDelete'); | |
| const cancelDeleteBtn = document.getElementById('cancelDelete'); | |
| const overlay = document.getElementById('overlay'); | |
| let conversations = []; | |
| let currentConversation = null; | |
| let selectedConversation = null; | |
| function loadConversations() { | |
| const savedConversations = localStorage.getItem('conversations'); | |
| if (savedConversations) { | |
| conversations = JSON.parse(savedConversations); | |
| updateConversationList(); | |
| } | |
| } | |
| loadConversations(); | |
| function saveConversations() { | |
| localStorage.setItem('conversations', JSON.stringify(conversations)); | |
| } | |
| function addMessage(content, isUser = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.classList.add('message', isUser ? 'user-message' : 'ai-message'); | |
| const renderedContent = marked.parse(content); | |
| messageDiv.innerHTML = renderedContent; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| if (typeof hljs !== 'undefined') { | |
| messageDiv.querySelectorAll('pre code').forEach((block) => { | |
| hljs.highlightElement(block); | |
| }); | |
| } | |
| } | |
| async function getAIResponse(userMessage) { | |
| const response = await fetch('/chat?source=chatgpt', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ message: userMessage }) | |
| }).then(response => response.json()); | |
| console.log(response.response); | |
| return response.response; | |
| } | |
| chatForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addMessage(message, true); | |
| userInput.value = ''; | |
| userInput.style.height = 'auto'; | |
| userInput.focus(); | |
| const response = await getAIResponse(message); | |
| addMessage(response, false); | |
| if (currentConversation) { | |
| currentConversation.messages.push({ user: message, ai: response }); | |
| } else { | |
| currentConversation = { | |
| id: Date.now(), | |
| name: `Conversation ${conversations.length + 1}`, | |
| messages: [{ user: message, ai: response }] | |
| }; | |
| conversations.unshift(currentConversation); | |
| } | |
| updateConversationList(); | |
| saveConversations(); | |
| } | |
| }); | |
| userInput.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = `${this.scrollHeight}px`; | |
| }); | |
| function toggleMenu() { | |
| conversationMenu.classList.toggle('open'); | |
| } | |
| function updateConversationList() { | |
| conversationList.innerHTML = ''; | |
| conversations.forEach(conv => { | |
| const li = document.createElement('li'); | |
| li.classList.add('conversation-item'); | |
| li.innerHTML = `<div>${conv.name}</div>`; | |
| li.dataset.id = conv.id; | |
| li.addEventListener('click', () => loadConversation(conv)); | |
| li.addEventListener('contextmenu', e => showContextMenu(e, conv)); | |
| conversationList.appendChild(li); | |
| }); | |
| saveConversations(); | |
| } | |
| function loadConversation(conversation) { | |
| currentConversation = conversation; | |
| chatMessages.innerHTML = ''; | |
| conversation.messages.forEach(msg => { | |
| addMessage(msg.user, true); | |
| addMessage(msg.ai, false); | |
| }); | |
| toggleMenu(); | |
| } | |
| function showContextMenu(e, conversation) { | |
| e.preventDefault(); | |
| selectedConversation = conversation; | |
| contextMenu.style.display = 'block'; | |
| contextMenu.style.left = `${e.pageX}px`; | |
| contextMenu.style.top = `${e.pageY}px`; | |
| } | |
| function hideContextMenu() { | |
| contextMenu.style.display = 'none'; | |
| } | |
| function showPopup(popup) { | |
| overlay.classList.add('active'); | |
| popup.classList.add('active'); | |
| } | |
| function hidePopup(popup) { | |
| overlay.classList.remove('active'); | |
| popup.classList.remove('active'); | |
| } | |
| menuBtn.addEventListener('click', toggleMenu); | |
| newConversationBtn.addEventListener('click', () => { | |
| currentConversation = { | |
| id: Date.now(), | |
| name: `Conversation ${conversations.length + 1}`, | |
| messages: [] | |
| }; | |
| conversations.unshift(currentConversation); | |
| updateConversationList(); | |
| chatMessages.innerHTML = ''; | |
| toggleMenu(); | |
| }); | |
| renameConversationBtn.addEventListener('click', () => { | |
| hideContextMenu(); | |
| renameInput.value = selectedConversation.name; | |
| showPopup(renamePopup); | |
| }); | |
| deleteConversationBtn.addEventListener('click', () => { | |
| hideContextMenu(); | |
| showPopup(deletePopup); | |
| }); | |
| confirmRenameBtn.addEventListener('click', () => { | |
| const newName = renameInput.value.trim(); | |
| if (newName) { | |
| selectedConversation.name = newName; | |
| updateConversationList(); | |
| } | |
| hidePopup(renamePopup); | |
| }); | |
| cancelRenameBtn.addEventListener('click', () => hidePopup(renamePopup)); | |
| confirmDeleteBtn.addEventListener('click', () => { | |
| conversations = conversations.filter(conv => conv.id !== selectedConversation.id); | |
| if (currentConversation && currentConversation.id === selectedConversation.id) { | |
| currentConversation = null; | |
| chatMessages.innerHTML = ''; | |
| } | |
| updateConversationList(); | |
| hidePopup(deletePopup); | |
| }); | |
| cancelDeleteBtn.addEventListener('click', () => hidePopup(deletePopup)); | |
| document.addEventListener('click', e => { | |
| if (!contextMenu.contains(e.target)) { | |
| hideContextMenu(); | |
| } | |
| }); | |
| document.addEventListener('keydown', (event) => { | |
| if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { | |
| event.preventDefault(); | |
| window.parent.postMessage({ key: event.key }, '*'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |