From f87f3c0cdd4b0467654132b059aad0f7bae0cf89 Mon Sep 17 00:00:00 2001
From: idchlife <idchlife@gmail.com>
Date: Wed, 4 Feb 2026 23:36:23 +0300
Subject: [PATCH] moved demo.html into demo-ui folder and renamed to index.html
 for ease of server serving... lol

---
 services/rag/langchain/demo-ui/index.html | 401 ++++++++++++++++++++++
 services/rag/langchain/demo.html          | 384 ---------------------
 2 files changed, 401 insertions(+), 384 deletions(-)
 create mode 100644 services/rag/langchain/demo-ui/index.html
 delete mode 100644 services/rag/langchain/demo.html
diff --git a/services/rag/langchain/demo-ui/index.html b/services/rag/langchain/demo-ui/index.html
new file mode 100644
index 0000000..5b6f3a1
--- /dev/null
+++ b/services/rag/langchain/demo-ui/index.html
@@ -0,0 +1,401 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>RAG Solution Chat Interface</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+      }
+
+      body {
+        background-color: #f5f7fa;
+        color: #333;
+        line-height: 1.6;
+      }
+
+      .container {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+
+      header {
+        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+        color: white;
+        padding: 20px;
+        border-radius: 10px;
+        margin-bottom: 20px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      h1 {
+        font-size: 1.8rem;
+        margin-bottom: 10px;
+      }
+
+      .api-endpoint-container {
+        display: flex;
+        gap: 10px;
+        margin-top: 15px;
+        flex-wrap: wrap;
+      }
+
+      .api-endpoint-container label {
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+      }
+
+      .api-endpoint-container input {
+        flex: 1;
+        min-width: 300px;
+        padding: 8px 12px;
+        border: none;
+        border-radius: 4px;
+        margin-left: 5px;
+      }
+
+      .api-endpoint-container button {
+        background-color: #fff;
+        color: #2575fc;
+        border: none;
+        padding: 8px 15px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-weight: bold;
+        transition: background-color 0.3s;
+      }
+
+      .api-endpoint-container button:hover {
+        background-color: #e6f0ff;
+      }
+
+      .chat-container {
+        background-color: white;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        height: 60vh;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .chat-header {
+        background-color: #f8f9fa;
+        padding: 15px;
+        border-bottom: 1px solid #eaeaea;
+        font-weight: bold;
+        color: #495057;
+      }
+
+      .chat-messages {
+        flex: 1;
+        padding: 20px;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+      }
+
+      .message {
+        max-width: 80%;
+        padding: 12px 16px;
+        border-radius: 18px;
+        position: relative;
+        animation: fadeIn 0.3s ease;
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .user-message {
+        align-self: flex-end;
+        background-color: #2575fc;
+        color: white;
+        border-bottom-right-radius: 4px;
+      }
+
+      .bot-message {
+        align-self: flex-start;
+        background-color: #e9ecef;
+        color: #495057;
+        border-bottom-left-radius: 4px;
+      }
+
+      .error-message {
+        align-self: flex-start;
+        background-color: #f8d7da;
+        color: #721c24;
+        border: 1px solid #f5c6cb;
+        border-radius: 18px;
+      }
+
+      .input-area {
+        display: flex;
+        padding: 15px;
+        background-color: #f8f9fa;
+        border-top: 1px solid #eaeaea;
+      }
+
+      .input-area input {
+        flex: 1;
+        padding: 12px 15px;
+        border: 1px solid #ddd;
+        border-radius: 24px;
+        outline: none;
+        font-size: 1rem;
+      }
+
+      .input-area button {
+        background-color: #2575fc;
+        color: white;
+        border: none;
+        padding: 12px 20px;
+        border-radius: 24px;
+        margin-left: 10px;
+        cursor: pointer;
+        font-weight: bold;
+        transition: background-color 0.3s;
+      }
+
+      .input-area button:hover {
+        background-color: #1a68e8;
+      }
+
+      .input-area button:disabled {
+        background-color: #adb5bd;
+        cursor: not-allowed;
+      }
+
+      .typing-indicator {
+        align-self: flex-start;
+        background-color: #e9ecef;
+        color: #495057;
+        padding: 12px 16px;
+        border-radius: 18px;
+        font-style: italic;
+      }
+
+      footer {
+        text-align: center;
+        margin-top: 20px;
+        color: #6c757d;
+        font-size: 0.9rem;
+      }
+
+      @media (max-width: 768px) {
+        .container {
+          padding: 10px;
+        }
+
+        .api-endpoint-container {
+          flex-direction: column;
+        }
+
+        .api-endpoint-container input {
+          min-width: auto;
+        }
+
+        .message {
+          max-width: 90%;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1>RAG Solution Chat Interface</h1>
+        <div class="api-endpoint-container">
+          <label for="apiEndpoint">API Endpoint:</label>
+          <input
+            type="text"
+            id="apiEndpoint"
+            value="http://localhost:8000/api/test-query"
+            placeholder="Enter API endpoint URL"
+          />
+          <button onclick="setApiEndpoint()">Set Endpoint</button>
+        </div>
+      </header>
+
+      <div class="chat-container">
+        <div class="chat-header">Chat with RAG Agent</div>
+        <div class="chat-messages" id="chatMessages">
+          <div class="message bot-message">
+            Hello! I'm your RAG agent. Please enter your API endpoint and start
+            chatting.
+          </div>
+        </div>
+        <div class="input-area">
+          <input
+            type="text"
+            id="userInput"
+            placeholder="Type your message here..."
+            onkeypress="handleKeyPress(event)"
+          />
+          <button onclick="sendMessage()" id="sendButton">Send</button>
+        </div>
+      </div>
+
+      <footer>
+        <p>RAG Solution with LangChain | Chat Interface Demo</p>
+      </footer>
+    </div>
+
+    <script>
+      // Store the API endpoint
+      let apiEndpoint = document.getElementById("apiEndpoint").value;
+
+      // Set the API endpoint from the input field
+      function setApiEndpoint() {
+        const input = document.getElementById("apiEndpoint");
+        apiEndpoint = input.value.trim();
+
+        if (!apiEndpoint) {
+          alert("Please enter a valid API endpoint URL");
+          return;
+        }
+
+        // Add notification that endpoint was set
+        addMessage(`API endpoint set to: ${apiEndpoint}`, "bot-message");
+      }
+
+      // Send a message to the API
+      async function sendMessage() {
+        const inputElement = document.getElementById("userInput");
+        const message = inputElement.value.trim();
+        const sendButton = document.getElementById("sendButton");
+
+        if (!message) {
+          return;
+        }
+
+        if (!apiEndpoint) {
+          alert("Please set the API endpoint first");
+          return;
+        }
+
+        // Disable the send button and input during request
+        sendButton.disabled = true;
+        inputElement.disabled = true;
+
+        try {
+          // Add user message to chat
+          addMessage(message, "user-message");
+
+          // Clear input
+          inputElement.value = "";
+
+          // Show typing indicator
+          const typingIndicator = addMessage(
+            "Thinking...",
+            "typing-indicator",
+            "typing",
+          );
+
+          // Send request to API
+          const response = await fetch(apiEndpoint, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              query: message,
+            }),
+          });
+
+          // Remove typing indicator
+          removeMessage(typingIndicator);
+
+          if (!response.ok) {
+            throw new Error(
+              `API request failed with status ${response.status}`,
+            );
+          }
+
+          const data = await response.json();
+
+          // Add bot response to chat
+          if (data.success) {
+            addMessage(data.response, "bot-message");
+          } else {
+            addMessage(
+              `Error: ${data.error || "Unknown error occurred"}`,
+              "error-message",
+            );
+          }
+        } catch (error) {
+          console.error("Error:", error);
+          // Remove typing indicator if still present
+          const typingElements = document.querySelectorAll(".typing");
+          typingElements.forEach((el) => el.remove());
+
+          // Add error message to chat
+          addMessage(
+            `Connection error: ${error.message}. Please check the API endpoint and try again.`,
+            "error-message",
+          );
+        } finally {
+          // Re-enable the send button and input
+          sendButton.disabled = false;
+          inputElement.disabled = false;
+          inputElement.focus();
+        }
+      }
+
+      // Add a message to the chat
+      function addMessage(text, className, id = null) {
+        const chatMessages = document.getElementById("chatMessages");
+        const messageDiv = document.createElement("div");
+        messageDiv.className = `message ${className}`;
+
+        if (id) {
+          messageDiv.id = id;
+        }
+
+        // Format text with line breaks
+        const formattedText = text.replace(/\n/g, "<br>");
+        messageDiv.innerHTML = formattedText;
+
+        chatMessages.appendChild(messageDiv);
+
+        // Scroll to bottom
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+
+        return messageDiv;
+      }
+
+      // Remove a message from the chat
+      function removeMessage(element) {
+        if (element && element.parentNode) {
+          element.parentNode.removeChild(element);
+        }
+      }
+
+      // Handle Enter key press in the input field
+      function handleKeyPress(event) {
+        if (event.key === "Enter") {
+          sendMessage();
+        }
+      }
+
+      // Focus on the input field when the page loads
+      window.onload = function () {
+        document.getElementById("userInput").focus();
+      };
+    </script>
+  </body>
+</html>
diff --git a/services/rag/langchain/demo.html b/services/rag/langchain/demo.html
deleted file mode 100644
index 40b6954..0000000
--- a/services/rag/langchain/demo.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>RAG Solution Chat Interface</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-
-        body {
-            background-color: #f5f7fa;
-            color: #333;
-            line-height: 1.6;
-        }
-
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-
-        header {
-            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
-            color: white;
-            padding: 20px;
-            border-radius: 10px;
-            margin-bottom: 20px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
-
-        h1 {
-            font-size: 1.8rem;
-            margin-bottom: 10px;
-        }
-
-        .api-endpoint-container {
-            display: flex;
-            gap: 10px;
-            margin-top: 15px;
-            flex-wrap: wrap;
-        }
-
-        .api-endpoint-container label {
-            display: flex;
-            align-items: center;
-            font-weight: bold;
-        }
-
-        .api-endpoint-container input {
-            flex: 1;
-            min-width: 300px;
-            padding: 8px 12px;
-            border: none;
-            border-radius: 4px;
-            margin-left: 5px;
-        }
-
-        .api-endpoint-container button {
-            background-color: #fff;
-            color: #2575fc;
-            border: none;
-            padding: 8px 15px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-weight: bold;
-            transition: background-color 0.3s;
-        }
-
-        .api-endpoint-container button:hover {
-            background-color: #e6f0ff;
-        }
-
-        .chat-container {
-            background-color: white;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
-            height: 60vh;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .chat-header {
-            background-color: #f8f9fa;
-            padding: 15px;
-            border-bottom: 1px solid #eaeaea;
-            font-weight: bold;
-            color: #495057;
-        }
-
-        .chat-messages {
-            flex: 1;
-            padding: 20px;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
-        }
-
-        .message {
-            max-width: 80%;
-            padding: 12px 16px;
-            border-radius: 18px;
-            position: relative;
-            animation: fadeIn 0.3s ease;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .user-message {
-            align-self: flex-end;
-            background-color: #2575fc;
-            color: white;
-            border-bottom-right-radius: 4px;
-        }
-
-        .bot-message {
-            align-self: flex-start;
-            background-color: #e9ecef;
-            color: #495057;
-            border-bottom-left-radius: 4px;
-        }
-
-        .error-message {
-            align-self: flex-start;
-            background-color: #f8d7da;
-            color: #721c24;
-            border: 1px solid #f5c6cb;
-            border-radius: 18px;
-        }
-
-        .input-area {
-            display: flex;
-            padding: 15px;
-            background-color: #f8f9fa;
-            border-top: 1px solid #eaeaea;
-        }
-
-        .input-area input {
-            flex: 1;
-            padding: 12px 15px;
-            border: 1px solid #ddd;
-            border-radius: 24px;
-            outline: none;
-            font-size: 1rem;
-        }
-
-        .input-area button {
-            background-color: #2575fc;
-            color: white;
-            border: none;
-            padding: 12px 20px;
-            border-radius: 24px;
-            margin-left: 10px;
-            cursor: pointer;
-            font-weight: bold;
-            transition: background-color 0.3s;
-        }
-
-        .input-area button:hover {
-            background-color: #1a68e8;
-        }
-
-        .input-area button:disabled {
-            background-color: #adb5bd;
-            cursor: not-allowed;
-        }
-
-        .typing-indicator {
-            align-self: flex-start;
-            background-color: #e9ecef;
-            color: #495057;
-            padding: 12px 16px;
-            border-radius: 18px;
-            font-style: italic;
-        }
-
-        footer {
-            text-align: center;
-            margin-top: 20px;
-            color: #6c757d;
-            font-size: 0.9rem;
-        }
-
-        @media (max-width: 768px) {
-            .container {
-                padding: 10px;
-            }
-            
-            .api-endpoint-container {
-                flex-direction: column;
-            }
-            
-            .api-endpoint-container input {
-                min-width: auto;
-            }
-            
-            .message {
-                max-width: 90%;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <header>
-            <h1>RAG Solution Chat Interface</h1>
-            <div class="api-endpoint-container">
-                <label for="apiEndpoint">API Endpoint:</label>
-                <input 
-                    type="text" 
-                    id="apiEndpoint" 
-                    value="http://localhost:8000/api/test-query" 
-                    placeholder="Enter API endpoint URL"
-                >
-                <button onclick="setApiEndpoint()">Set Endpoint</button>
-            </div>
-        </header>
-
-        <div class="chat-container">
-            <div class="chat-header">
-                Chat with RAG Agent
-            </div>
-            <div class="chat-messages" id="chatMessages">
-                <div class="message bot-message">
-                    Hello! I'm your RAG agent. Please enter your API endpoint and start chatting.
-                </div>
-            </div>
-            <div class="input-area">
-                <input 
-                    type="text" 
-                    id="userInput" 
-                    placeholder="Type your message here..." 
-                    onkeypress="handleKeyPress(event)"
-                >
-                <button onclick="sendMessage()" id="sendButton">Send</button>
-            </div>
-        </div>
-
-        <footer>
-            <p>RAG Solution with LangChain | Chat Interface Demo</p>
-        </footer>
-    </div>
-
-    <script>
-        // Store the API endpoint
-        let apiEndpoint = document.getElementById('apiEndpoint').value;
-
-        // Set the API endpoint from the input field
-        function setApiEndpoint() {
-            const input = document.getElementById('apiEndpoint');
-            apiEndpoint = input.value.trim();
-            
-            if (!apiEndpoint) {
-                alert('Please enter a valid API endpoint URL');
-                return;
-            }
-            
-            // Add notification that endpoint was set
-            addMessage(`API endpoint set to: ${apiEndpoint}`, 'bot-message');
-        }
-
-        // Send a message to the API
-        async function sendMessage() {
-            const inputElement = document.getElementById('userInput');
-            const message = inputElement.value.trim();
-            const sendButton = document.getElementById('sendButton');
-
-            if (!message) {
-                return;
-            }
-
-            if (!apiEndpoint) {
-                alert('Please set the API endpoint first');
-                return;
-            }
-
-            // Disable the send button and input during request
-            sendButton.disabled = true;
-            inputElement.disabled = true;
-
-            try {
-                // Add user message to chat
-                addMessage(message, 'user-message');
-                
-                // Clear input
-                inputElement.value = '';
-                
-                // Show typing indicator
-                const typingIndicator = addMessage('Thinking...', 'typing-indicator', 'typing');
-                
-                // Send request to API
-                const response = await fetch(apiEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        query: message
-                    })
-                });
-
-                // Remove typing indicator
-                removeMessage(typingIndicator);
-
-                if (!response.ok) {
-                    throw new Error(`API request failed with status ${response.status}`);
-                }
-
-                const data = await response.json();
-
-                // Add bot response to chat
-                if (data.success) {
-                    addMessage(data.response, 'bot-message');
-                } else {
-                    addMessage(`Error: ${data.error || 'Unknown error occurred'}`, 'error-message');
-                }
-            } catch (error) {
-                console.error('Error:', error);
-                // Remove typing indicator if still present
-                const typingElements = document.querySelectorAll('.typing');
-                typingElements.forEach(el => el.remove());
-                
-                // Add error message to chat
-                addMessage(`Connection error: ${error.message}. Please check the API endpoint and try again.`, 'error-message');
-            } finally {
-                // Re-enable the send button and input
-                sendButton.disabled = false;
-                inputElement.disabled = false;
-                inputElement.focus();
-            }
-        }
-
-        // Add a message to the chat
-        function addMessage(text, className, id = null) {
-            const chatMessages = document.getElementById('chatMessages');
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `message ${className}`;
-            
-            if (id) {
-                messageDiv.id = id;
-            }
-            
-            // Format text with line breaks
-            const formattedText = text.replace(/\n/g, '<br>');
-            messageDiv.innerHTML = formattedText;
-            
-            chatMessages.appendChild(messageDiv);
-            
-            // Scroll to bottom
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-            
-            return messageDiv;
-        }
-
-        // Remove a message from the chat
-        function removeMessage(element) {
-            if (element && element.parentNode) {
-                element.parentNode.removeChild(element);
-            }
-        }
-
-        // Handle Enter key press in the input field
-        function handleKeyPress(event) {
-            if (event.key === 'Enter') {
-                sendMessage();
-            }
-        }
-
-        // Focus on the input field when the page loads
-        window.onload = function() {
-            document.getElementById('userInput').focus();
-        };
-    </script>
-</body>
-</html>
\ No newline at end of file
