Xylaria-chat

Running

App Files Files Community

Reality123b commited on Feb 11

Commit

77d520c

verified ·

1 Parent(s): 622fa09

Update application/templates/index.html

Browse files

Files changed (1) hide show

application/templates/index.html +34 -250

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,10 +380,12 @@ code{
             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>
@@ -412,267 +414,49 @@ code{
         </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>

     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;
             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>
         </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>