Initial

2025-07-11 20:26:32 -04:00 · 2025-07-11 20:26:32 -04:00 · 1dec5d49ec
commit 1dec5d49ec
6 changed files with 1056 additions and 0 deletions
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>LangChain Chatbot</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        #chatbox {
+            height: 400px;
+            border: 1px solid #ccc;
+            padding: 10px;
+            overflow-y: auto;
+            margin-bottom: 10px;
+        }
+        #userInput {
+            width: 70%;
+            padding: 8px;
+        }
+        #sendButton {
+            padding: 8px 15px;
+        }
+        .user-message {
+            text-align: right;
+            margin: 5px;
+            color: blue;
+        }
+        .bot-message {
+            text-align: left;
+            margin: 5px;
+            color: green;
+        }
+
+        /* Style for the element before transition */
+        .new-element {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+
+        /* Style after transition */
+        .new-element.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    </style>
+</head>
+<body>
+    <h1>LangChain Chatbot</h1>
+    <div id="chatbox"></div>
+    <input type="text" id="userInput" placeholder="Type your message here...">
+    <button id="sendButton">Send</button>
+
+    <script>
+        const chatbox = document.getElementById('chatbox');
+        const userInput = document.getElementById('userInput');
+        const sendButton = document.getElementById('sendButton');
+        
+        // Connect to WebSocket
+        const socket = new WebSocket('ws://' + window.location.host + '/ws');
+        
+        // Handle incoming messages
+        socket.onmessage = function(event) {
+            const messageDiv = document.createElement('span');
+            messageDiv.classList.add('bot-message');
+            messageDiv.classList.add('new-element');
+            messageDiv.textContent = event.data;
+            chatbox.appendChild(messageDiv);
+            void messageDiv.offsetWidth;
+            messageDiv.classList.add('show');
+            chatbox.scrollTop = chatbox.scrollHeight;
+        };
+        
+        // Send message when button is clicked
+        sendButton.onclick = function() {
+            sendMessage();
+        };
+        
+        // Send message when Enter is pressed
+        userInput.onkeypress = function(e) {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        };
+        
+        function sendMessage() {
+            const message = userInput.value.trim();
+            if (message) {
+                // Display user message
+                const messageDiv = document.createElement('div');
+                messageDiv.classList.add('user-message');
+                messageDiv.textContent = message;
+                chatbox.appendChild(messageDiv);
+                
+                // Send to server
+                socket.send(message);
+                
+                // Clear input
+                userInput.value = '';
+                
+                chatbox.scrollTop = chatbox.scrollHeight;
+            }
+        }
+    </script>
+</body>
+</html>