Joakim Persson
73 lines
2.3 KiB
HTML
73 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ollama Chat</title>
|
|
<link rel="stylesheet" href="/css/clientstyle.css">
|
|
<!-- <link rel="stylesheet" href="python_test/smartassist/src/css/clientstyle.css"> -->
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Ollama Chat</h1>
|
|
|
|
<!-- Add the dropdown menu here -->
|
|
<div class="dropdown">
|
|
<button class="dropbtn">Select Endpoint/LLM</button>
|
|
<div class="dropdown-content" id="endpoint-dropdown"></div>
|
|
</div>
|
|
|
|
<div id="chatbox">
|
|
<!-- messages will be rendered here -->
|
|
</div>
|
|
<textarea id="userInput" placeholder="Type your message..." rows="5"></textarea>
|
|
<button id="sendButton" onclick="window.frontendApi.sendMessage()">Send</button>
|
|
|
|
|
|
<!-- Marked-it for markdown rendering -->
|
|
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14/dist/markdown-it.min.js"></script>
|
|
|
|
|
|
|
|
<!-- Include MathJax library to render mathematical notation -->
|
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
|
<script>
|
|
window.MathJax = {
|
|
loader: { load: ['input/tex', 'output/chtml'] },
|
|
tex: {
|
|
packages: ['base', 'ams'],
|
|
inlineMath: [['$', '$']]
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<script>
|
|
const chatContainer = document.getElementById('chatbox');
|
|
|
|
// Handle resize events
|
|
window.addEventListener('resize',
|
|
function() {
|
|
chatContainer.style.height = 'auto';
|
|
});
|
|
|
|
const userInputElement = document.getElementById('userInput');
|
|
|
|
userInputElement.addEventListener('keydown', function(event) {
|
|
if (event.shiftKey && event.key === 'Enter') { // Shift+Enter for newline
|
|
event.preventDefault();
|
|
userInputElement.value += '\n';
|
|
} else if (event.key === 'Enter') { // Enter to send message
|
|
window.frontendApi.sendMessage();
|
|
userInputElement.value = ''; // Clear the input field after sending
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<!-- Get the javascript handling communication with the backend -->
|
|
<script src="/js/frontend.js"></script>
|
|
</body>
|
|
</html>
|
|
|