:gem: [Feature] Place user-interactions at bottom, and set max-height of messagers-container adjustive to page scale ratio
Browse files- apps/llm_mixer/index.html +6 -7
- apps/llm_mixer/js/default.css +4 -0
- apps/llm_mixer/js/main.js +11 -0
apps/llm_mixer/index.html
CHANGED
|
@@ -12,19 +12,18 @@
|
|
| 12 |
</head>
|
| 13 |
<body>
|
| 14 |
<div class="container">
|
| 15 |
-
<div id="messagers-container" class="mt-3"
|
| 16 |
-
|
| 17 |
-
|
|
|
|
| 18 |
<div class="col-auto">
|
| 19 |
<select
|
| 20 |
class="form-select"
|
| 21 |
id="available-models-select"
|
| 22 |
-
>
|
| 23 |
-
<option value="gpt-3.5-turbo">GPT-3.5</option>
|
| 24 |
-
</select>
|
| 25 |
</div>
|
| 26 |
</div>
|
| 27 |
-
<div class="
|
| 28 |
<div class="row no-gutters">
|
| 29 |
<div class="col">
|
| 30 |
<textarea
|
|
|
|
| 12 |
</head>
|
| 13 |
<body>
|
| 14 |
<div class="container">
|
| 15 |
+
<div id="messagers-container" class="container mt-3">
|
| 16 |
+
</div>
|
| 17 |
+
<div id="user-interactions" class="container fixed-bottom mb-3">
|
| 18 |
+
<div class="mt-2">
|
| 19 |
<div class="col-auto">
|
| 20 |
<select
|
| 21 |
class="form-select"
|
| 22 |
id="available-models-select"
|
| 23 |
+
></select>
|
|
|
|
|
|
|
| 24 |
</div>
|
| 25 |
</div>
|
| 26 |
+
<div class="mt-2">
|
| 27 |
<div class="row no-gutters">
|
| 28 |
<div class="col">
|
| 29 |
<textarea
|
apps/llm_mixer/js/default.css
CHANGED
|
@@ -14,6 +14,10 @@
|
|
| 14 |
cursor: pointer;
|
| 15 |
}
|
| 16 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 17 |
#user-input {
|
| 18 |
resize: none;
|
| 19 |
max-height: 500px;
|
|
|
|
| 14 |
cursor: pointer;
|
| 15 |
}
|
| 16 |
|
| 17 |
+
#messagers-container {
|
| 18 |
+
overflow-y: auto;
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
#user-input {
|
| 22 |
resize: none;
|
| 23 |
max-height: 500px;
|
apps/llm_mixer/js/main.js
CHANGED
|
@@ -82,9 +82,20 @@ function set_user_input_history_buttons_state() {
|
|
| 82 |
}
|
| 83 |
}
|
| 84 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 85 |
$(document).ready(function () {
|
| 86 |
// load_available_models();
|
| 87 |
auto_resize_user_input();
|
| 88 |
register_user_input_callbacks();
|
| 89 |
register_user_input_history_buttons_callbacks();
|
|
|
|
|
|
|
| 90 |
});
|
|
|
|
| 82 |
}
|
| 83 |
}
|
| 84 |
|
| 85 |
+
function adjust_messagers_container_max_height() {
|
| 86 |
+
var user_interaction_height = $("#user-interactions").outerHeight(true);
|
| 87 |
+
var page_height = $(window).height();
|
| 88 |
+
$("#messagers-container").css(
|
| 89 |
+
"max-height",
|
| 90 |
+
page_height - user_interaction_height - 30 + "px"
|
| 91 |
+
);
|
| 92 |
+
}
|
| 93 |
+
|
| 94 |
$(document).ready(function () {
|
| 95 |
// load_available_models();
|
| 96 |
auto_resize_user_input();
|
| 97 |
register_user_input_callbacks();
|
| 98 |
register_user_input_history_buttons_callbacks();
|
| 99 |
+
adjust_messagers_container_max_height();
|
| 100 |
+
$(window).on("resize", adjust_messagers_container_max_height);
|
| 101 |
});
|