Xylaria-chat

Running

App Files Files Community

Reality123b commited on Feb 11

Commit

622fa09

verified ·

1 Parent(s): 3c9310d

Update application/templates/index.html

Browse files

Files changed (1) hide show

application/templates/index.html +251 -35

application/templates/index.html CHANGED Viewed

@@ -13,7 +13,7 @@
     width: 12px;
 }
 ::-webkit-scrollbar-track {
-    background: transparent;
 }
 ::-webkit-scrollbar-thumb {
     background: rgb(43, 43, 43);
@@ -29,7 +29,7 @@ html,body{
     width: 100vw;
     height: 100vh;
     overflow: hidden;
-    scrollbar-width: thin;
     scrollbar-color: rgb(41, 41, 41) transparent;
     font-family: 'Inter';
 }
@@ -105,7 +105,7 @@ nav{
     gap: 1vh;
     position: relative;
     font-size: medium;
 }
 .prevChat{
     min-height: 5vh;
@@ -145,8 +145,8 @@ nav{
     z-index: 50;
     top: 8vh;
     display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
     z-index: 1;
 }
 .inputs {
@@ -162,8 +162,8 @@ nav{
     border-top-left-radius: 20px;
     border-bottom-right-radius: 50px;
     font-size: large;
-    position: relative;
-    margin-top: auto;
     align-self: center;
 }
 .textBox{
@@ -185,11 +185,11 @@ nav{
     height: 6vh;
 }
 .messages {
-    overflow-y: auto;
     color: white;
     padding: 10px;
     display: flex;
-    flex-direction: column;
     position: relative;
 }
 .user{
@@ -201,7 +201,7 @@ nav{
     font-weight: 300;
     border-radius: 10px;
     line-height: 130%;
 }
 .user p{
     color: #b4b4b4;
@@ -217,10 +217,10 @@ nav{
 }
 .ai p {
     opacity: 0.9;
-    font-weight: 300;
     font-size: medium;
     line-height: 1.6;
-    color: #c5c5c5;
     background-color: rgba(28, 28, 28, 0.5);
     padding: 20px;
     border-radius: 10px;
@@ -284,7 +284,7 @@ code{
     font-family: 'Inter';
     font-weight: 300;
     font-size: 15px;
-    color: #cfcfcf;
     opacity: 0.9;
     padding-left: 10px;
 }
@@ -380,12 +380,10 @@ code{
             transition: max-height 0.3s ease-out;
         }
         .thinking-content.open {
-            max-height: 500px;
             transition: max-height 0.5s ease-in;
         }
     </style>
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <title>Chat Completion Demo</title>
 </head>
 <body>
@@ -414,49 +412,267 @@ code{
         </div>
     </div>
     <script>
-        // Add this to your existing JavaScript or create a new script
         function createThinkingElement(thinkingContent) {
             const container = document.createElement('div');
             container.className = 'thinking-container';
             const header = document.createElement('div');
             header.className = 'thinking-header';
             const title = document.createElement('span');
             title.className = 'thinking-title';
-            title.textContent = 'Reasoning about it';
             const arrow = document.createElement('i');
             arrow.className = 'fa-solid fa-chevron-down thinking-arrow';
             const content = document.createElement('div');
             content.className = 'thinking-content';
-            content.textContent = thinkingContent;
             header.appendChild(title);
             header.appendChild(arrow);
             container.appendChild(header);
             container.appendChild(content);
             header.addEventListener('click', () => {
                 arrow.classList.toggle('open');
                 content.classList.toggle('open');
             });
             return container;
         }
-        // Example usage in your message processing logic:
-        function processMessage(message) {
-            const thinkMatch = message.match(/<think>(.*?)<\/think>/s);
-            if (thinkMatch) {
-                const thinkingContent = thinkMatch[1].trim();
                 const thinkingElement = createThinkingElement(thinkingContent);
-                // Insert the thinking element into your message container
-                document.getElementById('messages').appendChild(thinkingElement);
             }
         }
     </script>
-    <script src="{{ url_for('static', filename='js/script.js') }}" type="module"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
 </body>
-</html>

     width: 12px;
 }
 ::-webkit-scrollbar-track {
+    background: transparent;
 }
 ::-webkit-scrollbar-thumb {
     background: rgb(43, 43, 43);
     width: 100vw;
     height: 100vh;
     overflow: hidden;
+    scrollbar-width: thin;
     scrollbar-color: rgb(41, 41, 41) transparent;
     font-family: 'Inter';
 }
     gap: 1vh;
     position: relative;
     font-size: medium;
 }
 .prevChat{
     min-height: 5vh;
     z-index: 50;
     top: 8vh;
     display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
     z-index: 1;
 }
 .inputs {
     border-top-left-radius: 20px;
     border-bottom-right-radius: 50px;
     font-size: large;
+    position: relative;
+    margin-top: auto;
     align-self: center;
 }
 .textBox{
     height: 6vh;
 }
 .messages {
+    overflow-y: auto;
     color: white;
     padding: 10px;
     display: flex;
+    flex-direction: column;
     position: relative;
 }
 .user{
     font-weight: 300;
     border-radius: 10px;
     line-height: 130%;
 }
 .user p{
     color: #b4b4b4;
 }
 .ai p {
     opacity: 0.9;
+    font-weight: 300;
     font-size: medium;
     line-height: 1.6;
+    color: #c5c5c5;
     background-color: rgba(28, 28, 28, 0.5);
     padding: 20px;
     border-radius: 10px;
     font-family: 'Inter';
     font-weight: 300;
     font-size: 15px;
+    color: #cfcfcf;
     opacity: 0.9;
     padding-left: 10px;
 }
             transition: max-height 0.3s ease-out;
         }
         .thinking-content.open {
+            max-height: 500px; /* Adjust as needed */
             transition: max-height 0.5s ease-in;
         }
     </style>
     <title>Chat Completion Demo</title>
 </head>
 <body>
         </div>
     </div>
     <script>
+        // Put the JavaScript code here, *inside* the <script> tags
         function createThinkingElement(thinkingContent) {
             const container = document.createElement('div');
             container.className = 'thinking-container';
             const header = document.createElement('div');
             header.className = 'thinking-header';
             const title = document.createElement('span');
             title.className = 'thinking-title';
+            title.textContent = 'Reasoning';
             const arrow = document.createElement('i');
             arrow.className = 'fa-solid fa-chevron-down thinking-arrow';
             const content = document.createElement('div');
             content.className = 'thinking-content';
+            content.innerHTML = thinkingContent; // Use innerHTML to allow for formatting
             header.appendChild(title);
             header.appendChild(arrow);
             container.appendChild(header);
             container.appendChild(content);
             header.addEventListener('click', () => {
                 arrow.classList.toggle('open');
                 content.classList.toggle('open');
             });
             return container;
         }
+        async function displayAIMessage(message) {
+            const messagesContainer = document.getElementById('messages');
+            const aiMessageDiv = document.createElement('div');
+            aiMessageDiv.className = 'ai';
+            // Check for <think> tags
+            const thinkRegex = /<think>(.*?)<\/think>/s;
+            const match = message.match(thinkRegex);
+            if (match) {
+                const thinkingContent = match[1].trim();
+                const otherContent = message.replace(thinkRegex, '').trim();
+                // Create and append the "Reasoning" element
                 const thinkingElement = createThinkingElement(thinkingContent);
+                aiMessageDiv.appendChild(thinkingElement);
+                // Create and append the regular AI message content (if any)
+                if (otherContent) {
+                    const aiTextP = document.createElement('p');
+                    aiTextP.innerHTML = otherContent.replace(/\n/g, '<br>');
+                    aiMessageDiv.appendChild(aiTextP);
+                }
+            } else {
+                // No <think> tags, just display the message normally
+                const aiTextP = document.createElement('p');
+                aiTextP.innerHTML = message.replace(/\n/g, '<br>');
+                aiMessageDiv.appendChild(aiTextP);
+            }
+            messagesContainer.appendChild(aiMessageDiv);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to bottom
+            hljs.highlightAll();
+        }
+        const sendBtn = document.getElementById("sendBtn");
+        const textBox = document.getElementById("textBox");
+        const hamburger = document.getElementById("hamburger");
+        const menu = document.getElementById("menu");
+        const newChat = document.getElementById("newChat");
+        const prevChatsCont = document.getElementById("prevChatsCont");
+        const models = document.getElementById("models");
+        const webSearchBtn = document.getElementById("webSearch");
+        let chats; //store the chats array.
+        function addChatToMenu(chat) {
+            const prevChat = document.createElement("div");
+            prevChat.className = "prevChat";
+            const icon = document.createElement("i");
+            icon.className = "fa-regular fa-message";
+            prevChat.appendChild(icon);
+            const chatTitle = document.createElement("p");
+            // Use the first user message as the chat title (or a default if none)
+            const firstUserMessage = chat.find(msg => msg.role === 'user')?.content || 'New Chat';
+            // Shorten the title to, say, 20 characters, and add "..." if it's longer
+            chatTitle.textContent = firstUserMessage.length > 20 ? firstUserMessage.substring(0, 20) + "..." : firstUserMessage;
+            prevChat.appendChild(chatTitle);
+            prevChat.addEventListener("click", () => loadChat(chat)); // Load chat on click
+            prevChatsCont.appendChild(prevChat);
+        }
+        function loadChat(chat) {
+            // Clear current messages
+            const messagesContainer = document.getElementById("messages");
+            messagesContainer.innerHTML = "";
+            // Display messages from the selected chat
+            chat.forEach(msg => {
+                if (msg.role === 'user') {
+                    displayUserMessage(msg.content);
+                } else if (msg.role === 'assistant') {
+                    displayAIMessage(msg.content);
+                }
+            });
+        }
+        function saveChats() {
+            localStorage.setItem('chats', JSON.stringify(chats));
+        }
+        function loadChats() {
+            const storedChats = localStorage.getItem('chats');
+            if (storedChats) {
+                chats = JSON.parse(storedChats);
+                chats.forEach(addChatToMenu);
+            } else {
+                chats = [];  // Initialize as an empty array if no chats are stored
+            }
+        }
+        async function getModels() {
+            try {
+                const response = await fetch('/models');
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const modelsList = await response.json();
+                modelsList.forEach(model => {
+                    const option = document.createElement("option");
+                    option.value = model.id;
+                    option.textContent = model.id;
+                    models.appendChild(option)
+                });
+            } catch (error) {
+                console.error("Could not fetch models:", error);
+            }
+        }
+        // Call getModels when the script loads
+        getModels();
+        loadChats();
+        function startNewChat() {
+            // Clear the message display area
+            const messagesContainer = document.getElementById("messages");
+            messagesContainer.innerHTML = "";
+            // Clear the input box
+            textBox.value = "";
+            // Reset the chats array to an empty array for a fresh start
+            chats = [];
+            //also delete it from storage
+            localStorage.removeItem("chats");
+            prevChatsCont.innerHTML = ""; //clear the chat list
+        }
+        // Attach the event listener to the "New Chat" button
+        newChat.addEventListener("click", startNewChat);
+        function displayUserMessage(message) {
+            const messagesContainer = document.getElementById('messages');
+            const userMessageDiv = document.createElement('div');
+            userMessageDiv.className = 'user';
+            const userTextP = document.createElement('p');
+            userTextP.textContent = message;
+            userMessageDiv.appendChild(userTextP);
+            messagesContainer.appendChild(userMessageDiv);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to bottom
+        }
+        let isWebSearchEnabled = false; // Keep track of web search state
+        webSearchBtn.addEventListener('click', () => {
+            isWebSearchEnabled = !isWebSearchEnabled; // Toggle the state
+            // Change the icon based on the state
+            webSearchBtn.innerHTML = isWebSearchEnabled ? '<i class="fa-solid fa-x"></i>' : '<i class="fa-solid fa-globe"></i>';
+            // Optionally, provide visual feedback (e.g., change background color)
+            webSearchBtn.style.backgroundColor = isWebSearchEnabled ? 'red' : 'transparent';
+        });
+        // Function to send message
+        async function sendMessage() {
+            const userMessage = textBox.value.trim();
+            if (!userMessage) return; // Don't send empty messages
+            displayUserMessage(userMessage);
+            // Add user message to the current chat
+            const currentChat = chats[chats.length - 1] || []; // Get current chat or an empty array
+            currentChat.push({ role: 'user', content: userMessage });
+            if (chats.length === 0 || chats[chats.length -1].length > 0) { //if there are no chats yet, or if the current chat is not new
+                chats.push(currentChat); //add it to the main array
+            } else {
+                chats[chats.length-1] = currentChat;
+            }
+            addChatToMenu(currentChat); // Add to menu (or update if existing)
+            textBox.value = ""; // Clear input
+            // Send message to server
+            try {
+                const selectedModel = models.value; // Get selected model
+                const response = await fetch('/chat', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        message: userMessage,
+                        model: selectedModel, // Send model ID
+                        web_search: isWebSearchEnabled // Include web search status
+                    }),
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                const aiResponse = data.choices[0].message.content;
+                //push ai response into current chat
+                currentChat.push({role: 'assistant', content: aiResponse});
+                displayAIMessage(aiResponse);
+                saveChats()
+            } catch (error) {
+                console.error("Could not fetch:", error);
             }
         }
+        // Event listeners
+        sendBtn.addEventListener('click', sendMessage);
+        textBox.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+        hamburger.addEventListener("click", ()=>{
+            menu.style.width = menu.style.width === "200px" ? "0px" : "200px";
+        })
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
 </body>
+</html>