File size: 3,540 Bytes
120437c 8d57073 404b568 8d57073 c00fa7c 8d57073 404b568 8d57073 404b568 8d57073 c00fa7c 8d57073 c00fa7c 404b568 a217bfa c00fa7c a217bfa c00fa7c 404b568 a217bfa 404b568 c00fa7c 666948d 404b568 666948d 404b568 e950717 666948d c00fa7c 666948d c00fa7c 666948d c00fa7c 666948d 404b568 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
import { setup_temperature_on_select } from "../components/llm_models_loader.js";
export class InputsBinder {
constructor() {}
bind() {
setup_temperature_on_select();
let user_input_resizer = new UserInputResizer();
user_input_resizer.bind();
let chat_session_container_resize_binder =
new ChatSessionContainerResizeBinder();
chat_session_container_resize_binder.bind();
let chat_history_sidebar_resize_binder =
new ChatHistorySidebarResizeBinder();
chat_history_sidebar_resize_binder.bind();
}
}
class UserInputResizer {
constructor() {}
bind() {
// https://stackoverflow.com/questions/37629860/automatically-resizing-textarea-in-bootstrap
document.getElementById("user-input").addEventListener(
"input",
function () {
this.style.height = 0;
this.style.height = this.scrollHeight + 3 + "px";
},
false
);
}
}
class ChatSessionContainerResizeBinder {
constructor() {}
bind() {
this.resize();
$(window).resize(this.resize.bind(this));
}
resize() {
let user_interaction_height = $("#user-interactions").outerHeight(true);
let page_height = $(window).height();
$("#chat-session-container").css(
"max-height",
page_height - user_interaction_height + "px"
);
}
}
class ChatHistorySidebarResizeBinder {
constructor() {
this.USER_INTERACTIONS_MAX_WIDTH = 900;
this.SIDEBAR_GAP = 20;
this.SIDEBAR_MAX_WIDTH = 250;
this.SIDEBAR_MIN_WIDTH = 120;
}
bind() {
this.resize();
$(window).resize(this.resize.bind(this));
}
get_window_width() {
return $(window).width();
}
get_user_interactions_width() {
return $("#user-interactions").width();
}
get_side_margin() {
return (
(this.get_window_width() - this.get_user_interactions_width()) / 2 -
this.SIDEBAR_GAP
);
}
need_to_show(sidebar_name = null) {
let sidebar = $(`#chat-${sidebar_name}-sidebar`);
return (
!sidebar.hasClass("show") &&
localStorage.getItem(`show_chat_${sidebar_name}_sidebar`) === "true"
);
}
resize_sidebar(sidebar_name = null) {
let sidebar = $(`#chat-${sidebar_name}-sidebar`);
let is_sidebar_show = sidebar[0].classList.contains("show");
if (this.get_side_margin() >= this.SIDEBAR_MAX_WIDTH) {
if (this.need_to_show(sidebar_name)) {
sidebar.addClass("show");
}
sidebar.css("max-width", this.SIDEBAR_MAX_WIDTH + "px");
sidebar.css("min-width", this.SIDEBAR_MIN_WIDTH + "px");
} else if (this.get_side_margin() <= this.SIDEBAR_MIN_WIDTH) {
if (is_sidebar_show) {
sidebar.removeClass("show");
}
sidebar.css("max-width", this.SIDEBAR_MAX_WIDTH + "px");
sidebar.css("min-width", this.SIDEBAR_MIN_WIDTH + "px");
} else {
if (this.need_to_show(sidebar_name)) {
sidebar.addClass("show");
}
sidebar.css("max-width", this.get_side_margin());
sidebar.css("min-width", this.SIDEBAR_MIN_WIDTH + "px");
}
}
resize() {
for (let sidebar_name of ["history", "agents"]) {
this.resize_sidebar(sidebar_name);
}
}
}
|