Hugging Face's logo

Spaces:
Hansimov
/
llm-mixer
Running

App Files Community
Hansimov commited on
Commit
a217bfa
•
1 Parent(s): 666948d

:zap: [Enhance] New v4 fa icons, sidebar toggle button icons and title, and reduce SIDEBAR_MAX_WIDTH

Browse files
Files changed (4) hide show
  1. .gitignore +2 -1
  2. components/buttons_binder.js +2 -2
  3. components/inputs_binder.js +3 -3
  4. index.html +23 -23
.gitignore CHANGED
@@ -1,3 +1,4 @@
1
  node_modules
2
  package-lock.json
3
- .vscode
 
 
1
  node_modules
2
  package-lock.json
3
+ .vscode
4
+ live.js
components/buttons_binder.js CHANGED
@@ -221,8 +221,8 @@ class ChatHistorySidebarToggleButtonBinder {
221
  if (this.get_show_history_sidebar_storage() === "true") {
222
  sidebar.addClass("show");
223
  }
224
-
225
  const toggle_button = $(`#${this.sidebar_name}-sidebar-toggle-button`);
 
226
  toggle_button.click(() => {
227
  sidebar.toggleClass("show");
228
  localStorage.setItem(
@@ -273,8 +273,8 @@ class ChatAgentsSidebarToggleButtonBinder {
273
  if (this.get_show_sidebar_storage() === "true") {
274
  sidebar.addClass("show");
275
  }
276
-
277
  const toggle_button = $(`#${this.sidebar_name}-sidebar-toggle-button`);
 
278
  toggle_button.click(() => {
279
  sidebar.toggleClass("show");
280
  localStorage.setItem(
 
221
  if (this.get_show_history_sidebar_storage() === "true") {
222
  sidebar.addClass("show");
223
  }
 
224
  const toggle_button = $(`#${this.sidebar_name}-sidebar-toggle-button`);
225
+ toggle_button.attr("title", "Toggle chat history sidebar");
226
  toggle_button.click(() => {
227
  sidebar.toggleClass("show");
228
  localStorage.setItem(
 
273
  if (this.get_show_sidebar_storage() === "true") {
274
  sidebar.addClass("show");
275
  }
 
276
  const toggle_button = $(`#${this.sidebar_name}-sidebar-toggle-button`);
277
+ toggle_button.attr("title", "Toggle chat agents sidebar");
278
  toggle_button.click(() => {
279
  sidebar.toggleClass("show");
280
  localStorage.setItem(
components/inputs_binder.js CHANGED
@@ -50,7 +50,7 @@ class ChatHistorySidebarResizeBinder {
50
  constructor() {
51
  this.USER_INTERACTIONS_MAX_WIDTH = 900;
52
  this.SIDEBAR_GAP = 20;
53
- this.SIDEBAR_MAX_WIDTH = 300;
54
  this.SIDEBAR_MIN_WIDTH = 120;
55
  }
56
  bind() {
@@ -60,12 +60,12 @@ class ChatHistorySidebarResizeBinder {
60
  get_window_width() {
61
  return $(window).width();
62
  }
63
- get_user_interations_width() {
64
  return $("#user-interactions").width();
65
  }
66
  get_side_margin() {
67
  return (
68
- (this.get_window_width() - this.get_user_interations_width()) / 2 -
69
  this.SIDEBAR_GAP
70
  );
71
  }
 
50
  constructor() {
51
  this.USER_INTERACTIONS_MAX_WIDTH = 900;
52
  this.SIDEBAR_GAP = 20;
53
+ this.SIDEBAR_MAX_WIDTH = 250;
54
  this.SIDEBAR_MIN_WIDTH = 120;
55
  }
56
  bind() {
 
60
  get_window_width() {
61
  return $(window).width();
62
  }
63
+ get_user_interactions_width() {
64
  return $("#user-interactions").width();
65
  }
66
  get_side_margin() {
67
  return (
68
+ (this.get_window_width() - this.get_user_interactions_width()) / 2 -
69
  this.SIDEBAR_GAP
70
  );
71
  }
index.html CHANGED
@@ -13,6 +13,7 @@
13
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
14
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
15
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
 
16
  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
17
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
18
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
@@ -23,33 +24,32 @@
23
  </head>
24
 
25
  <body>
26
-
27
  <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" id="chat-history-sidebar"
28
  aria-labelledby="chat-history-sidebar-label">
29
- <div class="offcanvas-header">
30
- <h5 class="offcanvas-title" id="chat-history-label">
31
- <a style="text-decoration: none; color:inherit;" href="#">Chat History</a>
32
- </h5>
33
- <button id="chat-history-sidebar-close-button" class="btn-close">
 
 
 
 
 
 
 
 
 
 
34
  </button>
35
  </div>
36
- <div class="offcanvas-body">
37
- <ul id="chat-history-sidebar-items" class="navbar-nav justify-content-end flex-grow-1">
38
- </ul>
39
- </div>
40
- <div class="my-2 row no-gutters justify-content-end">
41
- <div class="col">
42
- <button id="clear-chat-history-button" class="btn">
43
- <i class="fa fa-trash"></i>
44
- </button>
45
- </div>
46
- <div class="col">
47
- <button id="screenshot-button" class="btn">
48
- <i class="fa fa-camera"></i>
49
- </button>
50
- </div>
51
  </div>
52
  </div>
 
53
  <div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" id="chat-agents-sidebar"
54
  aria-labelledby="chat-agents-sidebar-label">
55
  <div class="offcanvas-header">
@@ -77,7 +77,7 @@
77
  <div class="my-1 row no-gutters justify-content-start">
78
  <div class="col-auto">
79
  <button id="chat-history-sidebar-toggle-button" class="btn px-0">
80
- <i class="fa fa-bars"></i>
81
  </button>
82
  </div>
83
  <div class="col-auto">
@@ -95,7 +95,7 @@
95
  </div>
96
  <div class="col-auto">
97
  <button id="chat-agents-sidebar-toggle-button" class="btn px-0">
98
- <i class="fa fa-user"></i>
99
  </button>
100
  </div>
101
  </div>
 
13
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
14
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
15
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
16
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/v4-shims.min.css" />
17
  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
18
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
19
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
 
24
  </head>
25
 
26
  <body>
 
27
  <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" id="chat-history-sidebar"
28
  aria-labelledby="chat-history-sidebar-label">
29
+ <div class="offcanvas-header">
30
+ <h5 class="offcanvas-title" id="chat-history-label">
31
+ <a style="text-decoration: none; color:inherit;" href="#">History</a>
32
+ </h5>
33
+ <button id="chat-history-sidebar-close-button" class="btn-close">
34
+ </button>
35
+ </div>
36
+ <div class="offcanvas-body">
37
+ <ul id="chat-history-sidebar-items" class="navbar-nav justify-content-end flex-grow-1">
38
+ </ul>
39
+ </div>
40
+ <div class="my-2 row no-gutters justify-content-end">
41
+ <div class="col">
42
+ <button id="clear-chat-history-button" class="btn">
43
+ <i class="fa fa-trash"></i>
44
  </button>
45
  </div>
46
+ <div class="col">
47
+ <button id="screenshot-button" class="btn">
48
+ <i class="fa fa-camera"></i>
49
+ </button>
 
 
 
 
 
 
 
 
 
 
 
50
  </div>
51
  </div>
52
+ </div>
53
  <div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" id="chat-agents-sidebar"
54
  aria-labelledby="chat-agents-sidebar-label">
55
  <div class="offcanvas-header">
 
77
  <div class="my-1 row no-gutters justify-content-start">
78
  <div class="col-auto">
79
  <button id="chat-history-sidebar-toggle-button" class="btn px-0">
80
+ <i class="fa fa-history"></i>
81
  </button>
82
  </div>
83
  <div class="col-auto">
 
95
  </div>
96
  <div class="col-auto">
97
  <button id="chat-agents-sidebar-toggle-button" class="btn px-0">
98
+ <i class="fa fa-weixin"></i>
99
  </button>
100
  </div>
101
  </div>