Spaces:

Hansimov
/

llm-mixer

Running

App Files Files Community

Hansimov commited on Jan 16

Commit

c00fa7c

•

1 Parent(s): 5089a01

:gem: [Feature] Responsive and adaptive chat-history-sidebar

Browse files

Files changed (3) hide show

components/inputs_binder.js +50 -1
css/default.css +17 -1
index.html +14 -12

components/inputs_binder.js CHANGED Viewed

@@ -9,6 +9,9 @@ export class InputsBinder {
         let chat_session_container_resize_binder =
             new ChatSessionContainerResizeBinder();
         chat_session_container_resize_binder.bind();
     }
 }
@@ -31,7 +34,7 @@ class ChatSessionContainerResizeBinder {
     constructor() { }
     bind() {
         this.resize();
-        $(window).on("resize", this.resize);
     }
     resize() {
         let user_interaction_height = $("#user-interactions").outerHeight(true);
@@ -42,3 +45,49 @@ class ChatSessionContainerResizeBinder {
         );
     }
 }

         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();
     }
 }
     constructor() { }
     bind() {
         this.resize();
+        $(window).resize(this.resize.bind(this));
     }
     resize() {
         let user_interaction_height = $("#user-interactions").outerHeight(true);
         );
     }
 }
+class ChatHistorySidebarResizeBinder {
+    constructor() {
+        this.USER_INTERACTIONS_MAX_WIDTH = 900;
+        this.SIDEBAR_GAP = 10;
+        this.SIDEBAR_MAX_WIDTH = 300;
+        this.SIDEBAR_MIN_WIDTH = 120;
+    }
+    bind() {
+        this.resize();
+        $(window).resize(this.resize.bind(this));
+    }
+    get_window_width() {
+        return $(window).width();
+    }
+    get_user_interations_width() {
+        return $("#user-interactions").width();
+    }
+    get_side_margin() {
+        return (this.get_window_width() - this.get_user_interations_width()) / 2 - this.SIDEBAR_GAP;
+    }
+    resize() {
+        let sidebar = $("#chat-history-sidebar");
+        let user_interactions = $("#user-interactions");
+        let is_sidebar_show = sidebar[0].classList.contains("show");
+        if (this.get_side_margin() >= this.SIDEBAR_MAX_WIDTH) {
+            if (!is_sidebar_show) {
+                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 (!is_sidebar_show) {
+                sidebar.addClass("show");
+            }
+            sidebar.css("max-width", this.get_side_margin());
+            sidebar.css("min-width", this.SIDEBAR_MIN_WIDTH + "px");
+        }
+    }
+}

css/default.css CHANGED Viewed

@@ -4,11 +4,27 @@
     grid-gap: 10px;
 }
 .available-model-item {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .available-model-item:hover {
     background-color: #dbedff;
     cursor: pointer;
@@ -111,4 +127,4 @@
 .icon-success {
     color: green;
-}

     grid-gap: 10px;
 }
+.container {
+    max-width: 100vw;
+}
+#chat-history-sidebar {
+    background-color: rgba(255, 255, 255, 0.5);
+}
+/* Adaptation for mobile */
+@media (min-width: 900px) {
+    .container {
+        max-width: 900px;
+    }
+}
 .available-model-item {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .available-model-item:hover {
     background-color: #dbedff;
     cursor: pointer;
 .icon-success {
     color: green;
+}

index.html CHANGED Viewed

@@ -20,19 +20,21 @@
 </head>
 <body>
     <div id="main-container">
-        <div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="chat-history-sidebar">
             <div class="offcanvas-header">
-                <h5 class="offcanvas-title" id="chat-history-label">Chat History</h5>
-                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas">
                 </button>
             </div>
             <div class="offcanvas-body">
-                <form class="d-flex" role="search">
                     <input class="form-control" type="search" placeholder="Search chats">
                     <button class="btn btn-success" type="submit">Search</button>
-                </form>
                 <ul class="navbar-nav justify-content-end flex-grow-1">
                     <li class="nav-item">
                         <a class="nav-link active" href="#chat-session-example-1">Chat-Session-Example-1</a>
@@ -68,12 +70,6 @@
                 </div>
             </div>
             <div class="mt-2 row no-gutters">
-                <div class="col-auto pr-0">
-                    <button id="chat-history-sidebar-button" class="btn px-0" data-bs-toggle="offcanvas"
-                        data-bs-target="#chat-history-sidebar">
-                        <i class="fa fa-bars"></i>
-                    </button>
-                </div>
                 <div class="col-auto">
                     <button id="show-endpoint-and-key-button" class="btn px-0">
                         <i class="fa fa-key"></i>
@@ -95,6 +91,12 @@
                         <i class="fa fa-angles-down"></i>
                     </button>
                 </div>
             </div>
             <div class="mt-2 row no-gutters">
                 <div class="col-auto pr-0">

 </head>
 <body>
     <div id="main-container">
+        <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
+            id="chat-history-sidebar" aria-labelledby="chat-history-sidebar-label">
             <div class="offcanvas-header">
+                <h5 class="offcanvas-title" id="chat-history-label">
+                    <a style="text-decoration: none; color:inherit;" href="#">Chat History</a>
+                </h5>
+                <button id="chat-history-close-button" class="btn-close" data-bs-dismiss="offcanvas">
                 </button>
             </div>
             <div class="offcanvas-body">
+                <!-- <form class="d-flex" role="search" id="chat-history-search-form">
                     <input class="form-control" type="search" placeholder="Search chats">
                     <button class="btn btn-success" type="submit">Search</button>
+                </form> -->
                 <ul class="navbar-nav justify-content-end flex-grow-1">
                     <li class="nav-item">
                         <a class="nav-link active" href="#chat-session-example-1">Chat-Session-Example-1</a>
                 </div>
             </div>
             <div class="mt-2 row no-gutters">
                 <div class="col-auto">
                     <button id="show-endpoint-and-key-button" class="btn px-0">
                         <i class="fa fa-key"></i>
                         <i class="fa fa-angles-down"></i>
                     </button>
                 </div>
+                <div class="col-auto">
+                    <button id="chat-history-sidebar-toggle-button" class="btn px-0" data-bs-toggle="offcanvas"
+                        data-bs-target="#chat-history-sidebar">
+                        <i class="fa fa-bars"></i>
+                    </button>
+                </div>
             </div>
             <div class="mt-2 row no-gutters">
                 <div class="col-auto pr-0">