pratik/knowledge-base
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Frontend improvement

Browse source
This commit is contained in:
Pratik Narola 2025-09-09 14:38:14 +05:30
parent 971548321f
commit fb332c5346
1 changed files with 36 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
frontend/index.html
View file

@ -127,19 +127,30 @@
gap: 10px; gap: 10px;
} }
.chat-input input { .chat-input textarea {
flex: 1; flex: 1;
padding: 12px 16px; padding: 12px 16px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 20px; border-radius: 20px;
font-size: 14px; font-size: 14px;
outline: none; 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; border-color: #007bff;
} }
.chat-input textarea::placeholder {
color: #999;
}
.chat-input button { .chat-input button {
padding: 12px 20px; padding: 12px 20px;
background: #007bff; background: #007bff;
@ -288,7 +299,7 @@
</div> </div>
<div class="chat-input"> <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> <button id="sendButton">Send</button>
</div> </div>
</div> </div>
@ -330,11 +341,13 @@
// Event listeners // Event listeners
sendButton.addEventListener('click', sendMessage); sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', function(e) { messageInput.addEventListener('keydown', handleKeyDown);
if (e.key === 'Enter') sendMessage(); messageInput.addEventListener('input', autoResizeTextarea);
});
refreshButton.addEventListener('click', loadMemories); refreshButton.addEventListener('click', loadMemories);
clearChatBtn.addEventListener('click', clearChatWithConfirmation); clearChatBtn.addEventListener('click', clearChatWithConfirmation);
// Initialize textarea height
autoResizeTextarea();
}); });
// Load chat history from localStorage // Load chat history from localStorage
@ -392,6 +405,7 @@
displayMessage(message, true); displayMessage(message, true);
saveMessage(message, true); saveMessage(message, true);
messageInput.value = ''; messageInput.value = '';
autoResizeTextarea(); // Reset textarea height
try { try {
// Get last 50 messages from localStorage as context // Get last 50 messages from localStorage as context
@ -547,6 +561,22 @@
console.log('Chat history cleared'); 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 // Make clearChatHistory available globally for debugging
window.clearChatHistory = clearChatHistory; window.clearChatHistory = clearChatHistory;
</script> </script>