Merge pull request #5 from sscargal/site-updates

Site updates

Author: sscargal

data/faq.yaml

@@ -1,17 +1,29 @@
-- question: What is MemMachine?
-  answer: MemMachine is an open-source, multi-layered memory system for AI agents. It allows developers to give their agents Short-Term, Long-Term, and Personalization memory, enabling them to have stateful, context-aware conversations and recall user-specific facts over time.
+- question: What is MemMachine, and what makes it unique?
+  answer: MemMachine is an open-source, multi-layered memory system for AI agents. It allows you to equip your agents with Short-Term, Long-Term, and Personalization memory. While many AI models offer some form of built-in memory, MemMachine's system is model-agnostic, meaning it can support multiple AI models simultaneously, including specialized models hosted in a private cloud or on-premises data center. This capability enables organizations to maintain full control of their data and work with various models without vendor lock-in.
 
-- question: How is this different from standard LangChain or LangGraph memory?
-  answer: While libraries like LangChain provide excellent memory components, MemMachine focuses on abstracting the complexity of managing different memory types and provides a dedicated Personalization layer that can be easily integrated into any agent framework, including LangChain and LangGraph.
-
-- question: Is the Open Source version ready for production use?
-  answer: Yes, the open-source version is fully-featured and can be deployed in production environments. It is ideal for developers who are comfortable managing their own infrastructure. Our Pro and Enterprise tiers offer managed hosting, dedicated support, and advanced features for teams that require a higher level of service and security.
+- question: Is MemMachine for developers or end users?
+  answer: MemMachine is primarily designed for Agent developers and organizations building AI applications. It provides a flexible and scalable memory system that can be integrated into various AI models, allowing developers to enhance their applications with advanced memory capabilities.
 
 - question: Why are these capabilities needed if they're becoming available by frontier labs like OpenAI?
   answer: Because a frontier lab's memory service keeps the memory, and its memory service does not work with other models. Many organizations work with multiple models, including specialized models deployed in its private environment, including its VPC in the cloud and its own on-prem data center.  They desire a memory system that can support all of these models.
 
+- question: How does MemMachine handle data privacy and security?
+  answer: MemMachine is designed with security in mind. The open-source version can be deployed in your private cloud or on-premises environment, giving you full control over your data.
+
 - question: Who is driving development of MemMachine?
-  answer: MemVerge incubated the project to the current stage, and this project will be community-driven.  MemVerge will continue to assign its engineering team to improve the memory system, and contributors of all backgrounds are welcome to join.
+  answer: The project was initially incubated by MemVerge to its current state. The project is now community-driven, and we welcome contributors of all backgrounds. MemVerge will continue to assign its engineering team to improve the memory system and support community efforts.
 
 - question: How can I get started with MemMachine?
-  answer: You can get started by visiting our [documentation](https://docs.memmachine.ai)
+  answer: You can get started by visiting our [documentation](https://docs.memmachine.ai)
+
+- question: Where can I find the source code for MemMachine?
+  answer: The source code for MemMachine is available on [GitHub](https://github.com/MemMachine/MemMachine)
+
+- question: How can I contribute to the MemMachine project?
+  answer: We welcome contributions from the community! You can contribute by reporting issues, suggesting features, or submitting pull requests on our [GitHub](https://github.com/MemMachine/MemMachine) repository.
+
+- question: How do I get support for MemMachine?
+  answer: You can get support through our community channels by joining our [Discord server](https://discord.gg/usydANvKqD) or filing an issue on our [GitHub](https://github.com/MemMachine/MemMachine) repository.
+
+- question: Is there an Enterprise version of MemMachine or support available for MemMachine users?
+  answer: An Enterprise version of MemMachine with additional features and dedicated support will be available soon.

themes/memmachine/assets/css/styles.css

@@ -83,7 +83,7 @@ body {
   line-height: 1.5;
   font-weight: 400;
   background: #211334 url(/img/bg.svg) center/cover no-repeat;
-  color: var(--light-300);
+  color: var(--light-500);
   scroll-behavior: smooth;
 }
 input:focus {
@@ -447,10 +447,19 @@ header nav ul li a:hover {
   display: flex;
   align-items: center;
   justify-content: center;
+  background: var(--gradient-lavender-pink-peach);
+}
+.hero-chat-input button i {
+  color: white; /* Ensure icons are white */
 }
-.hero-chat-input button svg {
+
+.hero-chat-input button svg,
+.hero-chat-input button i {
   width: 24px;
   height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .hero-brand p {
   margin-bottom: 32px;
@@ -462,7 +471,7 @@ header nav ul li a:hover {
 }
 
 .hero-chat-list::-webkit-scrollbar {
-  width: 4px;
+  width: 8px;
 }
 
 .hero-chat-list::-webkit-scrollbar-track {

themes/memmachine/assets/js/custom.js

@@ -87,40 +87,45 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 });
 
+// Chat Widget
 const chatList = document.getElementById("chatList");
 const userInput = document.getElementById("userInput");
 const sendButton = document.getElementById("sendButton");
+const chatInputContainer = document.getElementById("chatInputContainer");
 
 // Check if chatList exists before proceeding
 if (chatList) {
-  const messages = [
+  // Chat state to manage the conversation flow
+  let chatState = 0; 
+  
+  // Pre-scripted messages for the chat flow
+  const scriptedMessages = [
     {
       sender: "You",
-      time: "1:17 PM",
-      text: "What are your thoughts on the latest AI chip manufacturer earnings reports that came out this week?",
+      text: "How can I manage user-specific data without retraining my model for every user?",
     },
     {
       sender: "MemMachine Agent",
-      time: "1:17 PM",
-      text: "The reports show strong growth, particularly in the data center segment. However, I recall you mentioned last month that you're looking to decrease your exposure to hardware manufacturers and focus more on AI software and platform companies. Do you want me to filter these insights based on that strategy?",
+      text: "That's a key challenge for building personalized agents. MemMachine addresses this with its Personalization memory layer, which stores user-specific data independently of your core model. I recall you were building a financial advice agent for small businesses last month—this is a perfect use case for that.",
     },
     {
       sender: "You",
-      time: "1:18 PM",
-      text: "Wow, good memory. Yes, please. Focus on the implications for software companies.",
+      text: "Wow, you remember that? That's exactly what I'm working on. How does that work under the hood?",
     },
     {
       sender: "MemMachine Agent",
-      time: "1:18 PM",
-      text: "Understood. The strong hardware sales signal a surge in demand for advanced AI models, which is a bullish indicator for AI platform companies that leverage this new hardware.",
+      text: "The core of our memory system is designed to be model-agnostic, giving your agents stateful, context-aware conversations and the ability to recall user-specific facts over time. This is the foundation for building the next generation of AI solutions.",
+    },
+    {
+      sender: "You",
+      text: "Okay, that's exactly what I need.",
+    },
+    {
+      sender: "MemMachine Agent",
+      text: "You're welcome! Would you like to know how to get started with this kind of memory system? (Yes/No)",
     },
   ];
 
-  // Function to add initial messages to the chat
-  function loadInitialMessages() {
-    messages.forEach((message) => addMessage(message));
-  }
-
   function addMessage(message) {
     const chatItem = document.createElement("div");
     chatItem.className = "hero-chat-item";
@@ -134,50 +139,148 @@ if (chatList) {
             </div>
           `;
     chatList.appendChild(chatItem);
-    chatItem.classList.add("fade-in"); // Add fade-in class for animation
-    chatList.scrollTop = chatList.scrollHeight; // Scroll to the bottom
+    chatItem.classList.add("fade-in");
+    chatList.scrollTop = chatList.scrollHeight;
   }
-
-  // Load initial messages on page load
-  loadInitialMessages();
-
-  sendButton.addEventListener("click", () => {
-    submitMessage();
-  });
-
-  // Allow submitting message with Enter key
-  userInput.addEventListener("keypress", (event) => {
-    if (event.key === "Enter") {
-      submitMessage();
+  
+  // New function to load the entire conversation history
+  function loadConversationHistory() {
+    let delay = 0;
+    for (let i = 0; i < scriptedMessages.length; i++) {
+      setTimeout(() => {
+        const currentTime = new Date().toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        });
+        addMessage({
+          sender: scriptedMessages[i].sender,
+          time: currentTime,
+          text: scriptedMessages[i].text,
+        });
+      }, delay);
+      delay += 500; // Reduced delay for a faster feel
     }
-  });
+    // Set the state to 1 after the initial conversation loads,
+    // so the next message from the user is a response to the question.
+    chatState = 1;
+  }
 
   function submitMessage() {
-    const userMessage = userInput.value;
-    if (userMessage) {
-      const currentTime = new Date().toLocaleTimeString([], {
-        hour: "2-digit",
-        minute: "2-digit",
+    const userMessage = userInput.value.trim().toLowerCase();
+    const currentTime = new Date().toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+    
+    // The chat widget is only active for the final response
+    if (chatState === 1) {
+      // Post the user's message
+      addMessage({
+        sender: "You",
+        time: currentTime,
+        text: userInput.value,
       });
+      userInput.value = "";
+
+      const positiveResponses = ["yes", "y", "sure", "ok", "of course", "please"];
+      const negativeResponses = ["no", "n", "nope", "nah"];
+      const isPositive = positiveResponses.some(response => userMessage.includes(response));
+      const isNegative = negativeResponses.some(response => userMessage.includes(response));
+
+      setTimeout(() => {
+        if (isPositive) {
+          addMessage({
+            sender: "MemMachine Agent",
+            time: currentTime,
+            text: `Great! The best way to get started is with our comprehensive <a href="https://docs.memmachine.ai" target="_blank">documentation</a>. You can also <a href="https://discord.memmachine.ai" target="_blank">join our Discord server</a> to collaborate with other developers, or <a href="https://playground.memmachine.ai" target="_blank">try the Playground</a> to see a live demo.`,
+          });
+        } else if (isNegative) {
+          addMessage({
+            sender: "MemMachine Agent",
+            time: currentTime,
+            text: "No problem. If you change your mind, you can find our resources at any time in the navigation bar. We're here to help when you're ready!",
+          });
+        } else {
+          addMessage({
+            sender: "MemMachine Agent",
+            time: currentTime,
+            text: "I'm sorry, but I'm not a full-fledged chat bot (yet)! If you're looking for more information, you can find our resources at any time in the navigation bar. We're here to help when you're ready!",
+          });
+        }
+        chatState = 2; // End of the conversation flow
+        disableChatInput();
+        addRestartButton();
+      }, 500); // Reduced delay
+    } else {
+      // Default message for any interaction after the conversation is over
       addMessage({
         sender: "You",
         time: currentTime,
-        text: userMessage,
+        text: userInput.value,
       });
-      userInput.value = ""; // Clear input
+      userInput.value = "";
 
-      // Simulate the agent response
       setTimeout(() => {
         addMessage({
           sender: "MemMachine Agent",
           time: currentTime,
-          text: "Free quote limit reached. Please upgrade for unlimited access.",
+          text: "Thanks for visiting! Please use the links above to learn more about MemMachine."
         });
-      }, 500); // Delay for agent response
+      }, 500); // Reduced delay
+    }
+  }
+
+  function disableChatInput() {
+    userInput.disabled = true;
+    sendButton.style.display = "none";
+    userInput.placeholder = "Chat is complete.";
+  }
+  
+  function addRestartButton() {
+    const restartButton = document.createElement("button");
+    restartButton.id = "restartButton";
+    restartButton.className = "hero-chat-input-btn";
+    restartButton.innerHTML = `
+      <i class="fa-solid fa-rotate-right"></i>
+    `;
+    restartButton.addEventListener("click", () => {
+      chatList.innerHTML = ""; // Clear the chat messages
+      loadConversationHistory();
+      enableChatInput();
+    });
+    // Append the restart button to the chat input container
+    chatInputContainer.appendChild(restartButton);
+  }
+
+  function enableChatInput() {
+    userInput.disabled = false;
+    sendButton.style.display = "block";
+    userInput.placeholder = "Type your message";
+    const restartButton = document.getElementById('restartButton');
+    if (restartButton) {
+      restartButton.remove();
     }
   }
+
+  sendButton.addEventListener("click", () => {
+    submitMessage();
+  });
+
+  userInput.addEventListener("keypress", (event) => {
+    if (event.key === "Enter") {
+      submitMessage();
+    }
+  });
+
+  // Start the conversation history when the page loads
+  loadConversationHistory();
 }
 
+
+
+
+
+
 // Initialize Lenis for smooth scrolling
 const lenis = new Lenis();