|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Groq Chatbot SPA</title> |
|
|
<link rel="stylesheet" href="static/style.css"> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="modal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<h2>Enter Groq API Key</h2> |
|
|
<input type="password" id="apiKeyInput" placeholder="Groq API Key"> |
|
|
<button id="loginBtn">Login</button> |
|
|
<div id="loginError" class="error"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="app" class="hidden"> |
|
|
<header> |
|
|
<span>Groq Chatbot</span> |
|
|
<select id="modelSelect"></select> |
|
|
<label class="toggle-label"> |
|
|
<input type="checkbox" id="toolToggle" checked> |
|
|
Tool Calls |
|
|
</label> |
|
|
<button id="logoutBtn">Logout</button> |
|
|
</header> |
|
|
<div id="chatContainer"></div> |
|
|
<div id="typingIndicator" class="typing hidden">Bot is typing...</div> |
|
|
<form id="inputForm" autocomplete="off"> |
|
|
<input id="userInput" type="text" placeholder="Type your message..." autocomplete="off"> |
|
|
<button type="submit">Send</button> |
|
|
</form> |
|
|
</div> |
|
|
<script src="static/script.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
