*

author: elioat <{ID}+{username}@users.noreply.github.com> 2025-01-03 09:05:08 -0500
committer: elioat <{ID}+{username}@users.noreply.github.com> 2025-01-03 09:05:08 -0500
commit: c7cf5a85b5b0127c1a29a885e8d38a02e67f2ace (patch)
tree: 6a3725df28a153ed9630d275f129de923f475ba1 /html/matt-chat
parent: 91cd5f89a6baa187e475c0cae97f42369ba8019a (diff)
download: tour-c7cf5a85b5b0127c1a29a885e8d38a02e67f2ace.tar.gz
1 files changed, 93 insertions, 24 deletions
diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html
index 2160c58..12265cc 100644
--- a/html/matt-chat/index.html
+++ b/html/matt-chat/index.html
@@ -3,31 +3,40 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ollama chat</title>
+    <title>matt chat</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 20px;
             background-color: #f7f7f7;
+            max-width: 600px;
+            margin: 0 auto;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 100vh;
+            overflow: hidden;
         }
         #chat-container {
             background-color: white;
             border: 1px solid #ccc;
             border-radius: 8px;
-            padding: 20px;
-            max-width: 600px;
+            padding: 1em;
             margin: 0 auto;
-            height: 400px;
+            flex: 1;
             overflow-y: auto;
+            width: 100%;
+            max-height: 400px;
         }
         #user-input {
-            width: calc(100% - 20px);
+            width: 100%;
             padding: 10px;
             border-radius: 4px;
             border: 1px solid #ddd;
             font-size: 16px;
             margin-top: 10px;
+            box-sizing: border-box;
         }
         #send-button {
             padding: 10px 15px;
@@ -37,48 +46,81 @@
             border: none;
             cursor: pointer;
             margin-top: 10px;
+            width: 100%;
         }
         #send-button:hover {
             background-color: #0056b3;
         }
+
+        .model-select-container {
+            align-self: flex-start;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            padding: 1em;
+        }
+
+        .model-select-container label {
+            margin-left: 10px;
+        }
+
         .message {
             white-space: pre-wrap;
             margin-bottom: 10px;
-            padding: 10px;
+            padding: 1em;
             border-radius: 8px;
             background-color: #f1f1f1;
-            max-width: 80%;
+            display: block;
+            max-width: 100%;
         }
+
         .user-message {
             background-color: #007BFF;
             color: white;
             text-align: right;
             margin-right: 20px;
         }
+
         .bot-message {
             background-color: #f0f0f0;
             color: #333;
             margin-left: 20px;
         }
+
+        @media (max-width: 600px) {
+            #chat-container {
+                max-height: 300px; /* Reduce max height for mobile */
+            }
+        }
     </style>
 </head>
 <body>
 
+    <div class="model-select-container">
+        <select id="model-select">
+            <option value="llama3.1:8b">llama3.1:8b</option>
+            <option value="qwen2.5-coder:1.5b">qwen2.5-coder:1.5b</option>
+            <option value="qwen2.5-coder:7b">qwen2.5-coder:7b</option>
+        </select>
+        <label>
+            <input type="checkbox" id="retain-history" /> Build Context As You Chat?
+        </label>
+    </div>
+    
     <div id="chat-container">
         <!-- Messages will appear here -->
     </div>
 
-    <label for="model-select">Select Model:</label>
-    <select id="model-select">
-        <option value="llama3.1:8b">llama3.1:8b</option>
-        <option value="qwen2.5-coder:1.5b">qwen2.5-coder:1.5b</option>
-        <option value="qwen2.5-coder:7b">qwen2.5-coder:7b</option>
-    </select>
-
-    <textarea id="user-input" placeholder="Type your message..."></textarea>
-    <button id="send-button">Send</button>
+    <!-- New container for user input and send button -->
+    <div id="input-container" style="width: 100%; display: flex; flex-direction: column; margin-top: 10px;">
+        <textarea id="user-input" placeholder="Type your message..."></textarea>
+        <button id="send-button">Send</button>
+    </div>
 
     <script>
+        let conversationHistory = []; // Array to hold the conversation history
+        const contextWindowSize = 3; // Number of previous exchanges to keep
+
         // Function to add a message to the chat container
         function addMessage(message, sender = "user") {
             const chatContainer = document.getElementById("chat-container");
@@ -97,6 +139,7 @@
             if (!userMessage) return;
 
             addMessage(userMessage, "user");
+            conversationHistory.push({ role: "user", content: userMessage }); // Add user message to history
             userInput.value = "";
 
             // Create and add loading indicator
@@ -112,6 +155,18 @@
             try {
                 const modelSelect = document.getElementById("model-select");
                 const selectedModel = modelSelect.value;
+                const retainHistory = document.getElementById("retain-history").checked; // Check the checkbox state
+
+                // Prepare the messages for the API
+                const messagesToSend = [
+                    { role: "system", content: "You are a helpful assistant." }, // System message for context
+                    { role: "user", content: userMessage } // Always include the current user message
+                ];
+
+                // Include conversation history only if the checkbox is checked
+                if (retainHistory) {
+                    messagesToSend.push(...conversationHistory.slice(-contextWindowSize * 2)); // Get the last few exchanges
+                }
 
                 const response = await fetch("http://localhost:11434/v1/chat/completions", {
                     method: "POST",
@@ -120,7 +175,7 @@
                     },
                     body: JSON.stringify({
                         model: selectedModel,
-                        messages: [{ role: "user", content: userMessage }],
+                        messages: messagesToSend,
                     }),
                 });
 
@@ -130,14 +185,28 @@
 
                 // Handle the response
                 const data = await response.json();
-                const botResponse = data.choices[0].message.content;
+                console.log("API Response:", data); // Log the response for debugging
 
-                // Clear loading indicator
-                clearInterval(animationInterval);
-                loadingIndicator.remove();
+                if (data.choices && data.choices.length > 0) {
+                    const botResponse = data.choices[0].message.content;
+
+                    // Clear loading indicator
+                    clearInterval(animationInterval);
+                    loadingIndicator.remove();
 
-                // Add bot's response to chat
-                addMessage(botResponse, "bot");
+                    // Add bot's response to chat
+                    addMessage(botResponse, "bot");
+                    conversationHistory.push({ role: "bot", content: botResponse }); // Add bot response to history
+                } else {
+                    console.error("No response from API");
+                    loadingIndicator.remove();
+                    addMessage("Sorry, I didn't get a response from the assistant.", "bot");
+                }
+
+                // Optional: Limit the conversation history to the last 10 messages
+                if (conversationHistory.length > 10) {
+                    conversationHistory.shift(); // Remove the oldest message
+                }
 
             } catch (error) {
                 console.error("Error:", error);
@@ -166,7 +235,7 @@
         function animateLoadingIndicator(indicator) {
             let dots = 0;
             return setInterval(() => {
-                dots = (dots + 1) % 4;
+                dots = (dots + 1) % 6;
                 if (indicator && document.contains(indicator)) {
                     indicator.textContent = '.'.repeat(dots || 1);
                 }
author	elioat <{ID}+{username}@users.noreply.github.com>	2025-01-03 09:05:08 -0500
committer	elioat <{ID}+{username}@users.noreply.github.com>	2025-01-03 09:05:08 -0500
commit	c7cf5a85b5b0127c1a29a885e8d38a02e67f2ace (patch)
tree	6a3725df28a153ed9630d275f129de923f475ba1 /html/matt-chat
parent	91cd5f89a6baa187e475c0cae97f42369ba8019a (diff)
download	tour-c7cf5a85b5b0127c1a29a885e8d38a02e67f2ace.tar.gz