File size: 3,540 Bytes
120437c
8d57073
 
404b568
8d57073
 
 
 
 
 
 
c00fa7c
 
 
8d57073
 
 
 
404b568
8d57073
 
 
 
 
 
 
 
 
 
 
 
 
 
404b568
8d57073
 
c00fa7c
8d57073
 
 
 
 
 
 
 
 
 
c00fa7c
 
 
 
404b568
551207c
 
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 = 300;
        this.SIDEBAR_MIN_WIDTH = 150;
    }
    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);
        }
    }
}