Frontend improvement

frontend/index.html

@@ -127,19 +127,30 @@
             gap: 10px;
         }
 
-        .chat-input input {
+        .chat-input textarea {
             flex: 1;
             padding: 12px 16px;
             border: 1px solid #ddd;
             border-radius: 20px;
             font-size: 14px;
             outline: none;
+            resize: none;
+            min-height: 44px;
+            max-height: 200px;
+            overflow-y: auto;
+            font-family: inherit;
+            line-height: 1.4;
+            transition: height 0.2s ease;
         }
 
-        .chat-input input:focus {
+        .chat-input textarea:focus {
             border-color: #007bff;
         }
 
+        .chat-input textarea::placeholder {
+            color: #999;
+        }
+
         .chat-input button {
             padding: 12px 20px;
             background: #007bff;
@@ -288,7 +299,7 @@
             </div>
             
             <div class="chat-input">
-                <input type="text" id="messageInput" placeholder="Type a message..." maxlength="1000">
+                <textarea id="messageInput" placeholder="Type a message... (Enter to send, Shift+Enter for new line)" rows="1"></textarea>
                 <button id="sendButton">Send</button>
             </div>
         </div>
@@ -330,11 +341,13 @@
             
             // Event listeners
             sendButton.addEventListener('click', sendMessage);
-            messageInput.addEventListener('keypress', function(e) {
-                if (e.key === 'Enter') sendMessage();
-            });
+            messageInput.addEventListener('keydown', handleKeyDown);
+            messageInput.addEventListener('input', autoResizeTextarea);
             refreshButton.addEventListener('click', loadMemories);
             clearChatBtn.addEventListener('click', clearChatWithConfirmation);
+            
+            // Initialize textarea height
+            autoResizeTextarea();
         });
 
         // Load chat history from localStorage
@@ -392,6 +405,7 @@
             displayMessage(message, true);
             saveMessage(message, true);
             messageInput.value = '';
+            autoResizeTextarea(); // Reset textarea height
 
             try {
                 // Get last 50 messages from localStorage as context
@@ -547,6 +561,22 @@
             console.log('Chat history cleared');
         }
 
+        // Handle keyboard input for textarea
+        function handleKeyDown(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        }
+
+        // Auto-resize textarea based on content
+        function autoResizeTextarea() {
+            messageInput.style.height = 'auto';
+            const newHeight = Math.min(messageInput.scrollHeight, 200); // Max height of 200px
+            const minHeight = 44; // Min height to match initial styling
+            messageInput.style.height = Math.max(newHeight, minHeight) + 'px';
+        }
+
         // Make clearChatHistory available globally for debugging
         window.clearChatHistory = clearChatHistory;
     </script>