Hugging Face's logo

Spaces:
Hansimov
/
llm-mixer
Running

App Files Community
Hansimov commited on
Commit
4e3aa93
•
1 Parent(s): d0dbaf7

:hammer: [WIP] New Agent Modal: Enable toggle button and prototype

Browse files
Files changed (3) hide show
  1. components/buttons_binder.js +5 -0
  2. css/default.css +1 -5
  3. index.html +36 -3
components/buttons_binder.js CHANGED
@@ -293,6 +293,11 @@ class ChatAgentsSidebarToggleButtonBinder {
293
  }
294
  }
295
 
 
 
 
 
 
296
  class ClearChatAgentsButtonBinder {
297
  constructor() {
298
  this.sidebar_name = "chat-agents";
 
293
  }
294
  }
295
 
296
+ class NewAgentButtonBinder {
297
+ constructor() {}
298
+ bind() {}
299
+ }
300
+
301
  class ClearChatAgentsButtonBinder {
302
  constructor() {
303
  this.sidebar_name = "chat-agents";
css/default.css CHANGED
@@ -119,10 +119,6 @@ body {
119
  max-width: 75px;
120
  }
121
 
122
- #scroll-to-bottom-button {
123
- z-index: 100;
124
- }
125
-
126
  .message-viewer .edit-button,
127
  .message-viewer .copy-button,
128
  .message-viewer .regenerate-button {
@@ -195,6 +191,6 @@ body {
195
  box-shadow: 0px 0px 6px 0px rgba(122, 122, 122, 0.4);
196
  }
197
  .explicit-button:hover {
198
- background-color: lightsalmon;
199
  font-weight: bold;
200
  }
 
119
  max-width: 75px;
120
  }
121
 
 
 
 
 
122
  .message-viewer .edit-button,
123
  .message-viewer .copy-button,
124
  .message-viewer .regenerate-button {
 
191
  box-shadow: 0px 0px 6px 0px rgba(122, 122, 122, 0.4);
192
  }
193
  .explicit-button:hover {
194
+ background-color: rgb(252, 231, 223);
195
  font-weight: bold;
196
  }
index.html CHANGED
@@ -24,7 +24,7 @@
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">
@@ -56,7 +56,7 @@
56
  </div>
57
  </div>
58
  </div>
59
- <div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" id="chat-agents-sidebar"
60
  aria-labelledby="chat-agents-sidebar-label">
61
  <div class="offcanvas-header">
62
  <button id="chat-agents-sidebar-close-button" class="btn px-0 mx-0">
@@ -68,7 +68,10 @@
68
  </div>
69
  <div class="offcanvas-body">
70
  <div class="my-0 row no-gutters">
71
- <button id="new-agent-button" class="explicit-button">New Agent</button>
 
 
 
72
  </div>
73
  <ul id="chat-agents-sidebar-items" class="navbar-nav justify-content-end flex-grow-1">
74
  </ul>
@@ -81,6 +84,36 @@
81
  </div>
82
  </div>
83
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84
  <div id="main-container" class="container">
85
  <div id="top-toolbar" class="container mt-2">
86
  <div class="my-1 row no-gutters justify-content-start">
 
24
  </head>
25
 
26
  <body>
27
+ <div id="chat-history-sidebar" class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false"
28
  aria-labelledby="chat-history-sidebar-label">
29
  <div class="offcanvas-header">
30
  <h5 class="offcanvas-title" id="chat-history-label">
 
56
  </div>
57
  </div>
58
  </div>
59
+ <div id="chat-agents-sidebar" class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false"
60
  aria-labelledby="chat-agents-sidebar-label">
61
  <div class="offcanvas-header">
62
  <button id="chat-agents-sidebar-close-button" class="btn px-0 mx-0">
 
68
  </div>
69
  <div class="offcanvas-body">
70
  <div class="my-0 row no-gutters">
71
+ <button id="new-agent-button" type="button" class="explicit-button" data-bs-toggle="modal"
72
+ data-bs-target="#new-agent-modal">
73
+ <i class="fa fa-plus"></i> New Agent
74
+ </button>
75
  </div>
76
  <ul id="chat-agents-sidebar-items" class="navbar-nav justify-content-end flex-grow-1">
77
  </ul>
 
84
  </div>
85
  </div>
86
  </div>
87
+ <div id="new-agent-modal" class="modal" tabindex="-1" role="dialog">
88
+ <div class="modal-dialog">
89
+ <div class="modal-content">
90
+ <div class="modal-header">
91
+ <h4 class="modal-title">Create New Agent</h4>
92
+ <button class="btn" data-bs-dismiss="modal">
93
+ <i class="fa fa-close"></i>
94
+ </button>
95
+ </div>
96
+ <div class="modal-body">
97
+ <!-- input: nickname -->
98
+ <h5>Nickname</h5>
99
+ <input id="new-agent-model-nickname" class="form-control" type="text" placeholder="Nickname" />
100
+ <!-- input: system prompt -->
101
+ <h5>System Prompt</h5>
102
+ <input id="new-agent-model-system-prompt" class="form-control" type="text"
103
+ placeholder="System Message" />
104
+ <!-- select: model -->
105
+ <h5>Model</h5>
106
+ <!-- slider: temperature -->
107
+ <h5>Temperature</h5>
108
+ </div>
109
+ <div class="modal-footer justify-content-end">
110
+ <button id="new-agent-model-save-button" class="btn btn-success">Save</button>
111
+ <button id="new-agent-model-close-button" class="btn btn-secondary"
112
+ data-bs-dismiss="modal">Close</button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
  <div id="main-container" class="container">
118
  <div id="top-toolbar" class="container mt-2">
119
  <div class="my-1 row no-gutters justify-content-start">