2 Commits

Author SHA1 Message Date
Joakim Persson 8ac365862a Platshållare för meny. För tillfället är innehållet statiskt 2024-08-05 15:40:00 +02:00
Joakim Persson ab9bb1324c Lagt till dropdown-meny för val av endpoint och LLM 2024-08-05 15:38:15 +02:00
2 changed files with 43 additions and 0 deletions
+11
View File
@@ -9,6 +9,17 @@
<body> <body>
<h1>Ollama Chat</h1> <h1>Ollama Chat</h1>
<!-- Add the dropdown menu here -->
<div class="dropdown">
<button class="dropbtn">Select Endpoint/LLM</button>
<div class="dropdown-content">
<a href="#" onclick="frontendApi.setEndpointAndLlm('endpoint1', 'llm1')">Endpoint 1 - LLM 1</a>
<a href="#" onclick="frontendApi.setEndpointAndLlm('endpoint2', 'llm2')">Endpoint 2 - LLM 2</a>
<a href="#" onclick="frontendApi.setEndpointAndLlm('endpoint3', 'llm3')">Endpoint 3 - LLM 3</a>
</div>
</div>
<div id="chatbox"> <div id="chatbox">
<!-- messages will be rendered here --> <!-- messages will be rendered here -->
</div> </div>
@@ -26,6 +26,7 @@ h1 {
resize: both; /* Allow resizing vertically */ resize: both; /* Allow resizing vertically */
border: 1px solid #ccc; /* Add a thin grey border around chatbox */ border: 1px solid #ccc; /* Add a thin grey border around chatbox */
margin-bottom: 20px; /* Add some space between chatbox and userInput */ margin-bottom: 20px; /* Add some space between chatbox and userInput */
font-size: 14px; /* Decrease font size to 14 pixels */
} }
.message { .message {
@@ -83,3 +84,34 @@ button[onclick="window.frontendApi.sendMessage()"]:active {
background-color: #6f6f6f; /* Dark Grey when clicked */ background-color: #6f6f6f; /* Dark Grey when clicked */
} }
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
/* padding: 12px 16px; */
padding: 6px 8px;
text-decoration: none;
display: block;
font-size: 0.7rem; /* Decrease font size relative to root element */
line-height: 0.5; /* Decrease line height to reduce spacing */
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}