Hansimov commited on
Commit
68e33b7
1 Parent(s): b9716d2

:gem: [Feature] New sidebar component and toggle button with offcanvas mechanism

Browse files
Files changed (1) hide show
  1. index.html +113 -110
index.html CHANGED
@@ -1,118 +1,121 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <meta charset="UTF-8" />
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <head>
6
- <title>LLM Mixer</title>
7
- <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%221em%22 font-size=%2280%22>♾️</text></svg>">
8
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
9
- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
10
- <link
11
- rel="stylesheet"
12
- href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css"
13
- />
14
- <link
15
- rel="stylesheet"
16
- href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
17
- />
18
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
19
- <link
20
- rel="stylesheet"
21
- href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
22
- />
23
- <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
24
- <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
25
- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
26
- <link rel="stylesheet" href="./css/default.css" />
27
- </head>
28
- <body>
29
- <div id="main-container">
30
- <div id="chat-session-container" class="container">
31
- <div id="messagers-container" class="container my-3 py-1"></div>
32
  </div>
33
- <div id="user-interactions" class="container fixed-bottom mb-3">
34
- <div class="row mt-2 no-gutters">
35
- <div class="col px-0">
36
- <input
37
- id="openai-endpoint"
38
- class="form-control"
39
- rows="1"
40
- placeholder="Input Endpoint URL, then click √"
41
- ></input>
42
- </div>
43
- <div class="col-auto px-0">
44
- <button id="openai-endpoint-button" class="btn">
45
- <i class="fa fa-check"></i>
46
- </button>
47
- </div>
48
- <div class="col px-0">
49
- <input
50
- id="openai-api-key"
51
- class="form-control"
52
- rows="1"
53
- placeholder="Input API Key, then click √"
54
- ></input>
55
- </div>
56
- <div class="col-auto px-0">
57
- <button id="openai-api-key-button" class="btn">
58
- <i class="fa fa-check"></i>
59
- </button>
60
- </div>
61
  </div>
62
- <div class="mt-2 row no-gutters">
63
- <div class="col-auto">
64
- <button id="show-endpoint-and-key-button" class="btn px-0">
65
- <i class="fa fa-key"></i>
66
- </button>
67
- </div>
68
- <div class="col px-0">
69
- <select
70
- class="form-select"
71
- id="available-models-select"
72
- title="Available Models"
73
- ></select>
74
- </div>
75
- <div class="col-auto pr-0">
76
- <select
77
- class="form-select"
78
- id="temperature-select"
79
- title="Temperature"
80
- ></select>
81
- </div>
82
- <div class="col-auto">
83
- <button id="screenshot-button" class="btn px-0">
84
- <i class="fa fa-camera"></i>
85
- </button>
86
- </div>
87
- <div class="col-auto">
88
- <button id="scroll-to-bottom-button" class="btn px-0">
89
- <i class="fa fa-angles-down"></i>
90
- </button>
91
- </div>
92
  </div>
93
- <div class="mt-2 row no-gutters">
94
- <div class="col-auto pl-3 pr-0">
95
- <button id="new-chat-session" class="btn px-0">
96
- <i class="fa fa-circle-plus"></i>
97
- </button>
98
- </div>
99
- <div class="col px-0">
100
- <textarea
101
- id="user-input"
102
- class="form-control"
103
- rows="1"
104
- placeholder="Typing your prompt here ..."
105
- ></textarea>
106
- </div>
107
- <div class="col-auto pr-3 pl-0">
108
- <button id="send-user-input" class="btn px-0">
109
- <i class="fa fa-paper-plane"></i>
110
- </button>
111
- </div>
112
  </div>
113
-
114
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  </div>
116
- </body>
117
- <script type="module" src="./main.js"></script>
118
- </html>
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <meta charset="UTF-8" />
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+
6
+ <head>
7
+ <title>LLM Mixer</title>
8
+ <link rel="icon"
9
+ href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%221em%22 font-size=%2280%22>♾️</text></svg>">
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" />
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>
19
+ <link rel="stylesheet" href="./css/default.css" />
20
+ </head>
21
+
22
+ <body>
23
+
24
+ <div id="main-container">
25
+ <div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="chat-history-sidebar">
26
+ <div class="offcanvas-header">
27
+ <h5 class="offcanvas-title" id="chat-history-label">Chat History</h5>
28
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas">
29
+ </button>
 
 
30
  </div>
31
+ <div class="offcanvas-body">
32
+ <form class="d-flex" role="search">
33
+ <input class="form-control" type="search" placeholder="Search chats">
34
+ <button class="btn btn-success" type="submit">Search</button>
35
+ </form>
36
+ <ul class="navbar-nav justify-content-end flex-grow-1">
37
+ <li class="nav-item">
38
+ <a class="nav-link active" href="#chat-session-example-1">Chat-Session-Example-1</a>
39
+ </li>
40
+ <li class="nav-item">
41
+ <a class="nav-link" href="#chat-session-example-2">Chat-Session-Example-2</a>
42
+ </li>
43
+ </ul>
44
+ </div>
45
+ </div>
46
+ <div id="chat-session-container" class="container">
47
+ <div id="messagers-container" class="container my-3 py-1"></div>
48
+ </div>
49
+ <div id="user-interactions" class="container fixed-bottom mb-3">
50
+ <div class="row mt-2 no-gutters">
51
+ <div class="col px-0">
52
+ <input id="openai-endpoint" class="form-control" rows="1"
53
+ placeholder="Input Endpoint URL, then click √"></input>
 
 
 
 
 
54
  </div>
55
+ <div class="col-auto px-0">
56
+ <button id="openai-endpoint-button" class="btn">
57
+ <i class="fa fa-check"></i>
58
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  </div>
60
+ <div class="col px-0">
61
+ <input id="openai-api-key" class="form-control" rows="1"
62
+ placeholder="Input API Key, then click √"></input>
63
+ </div>
64
+ <div class="col-auto px-0">
65
+ <button id="openai-api-key-button" class="btn">
66
+ <i class="fa fa-check"></i>
67
+ </button>
 
 
 
 
 
 
 
 
 
 
 
68
  </div>
 
69
  </div>
70
+ <div class="mt-2 row no-gutters">
71
+ <div class="col-auto pr-0">
72
+ <button id="chat-history-sidebar-button" class="btn px-0" data-bs-toggle="offcanvas"
73
+ data-bs-target="#chat-history-sidebar">
74
+ <i class="fa fa-bars"></i>
75
+ </button>
76
+ </div>
77
+ <div class="col-auto">
78
+ <button id="show-endpoint-and-key-button" class="btn px-0">
79
+ <i class="fa fa-key"></i>
80
+ </button>
81
+ </div>
82
+ <div class="col px-0">
83
+ <select class="form-select" id="available-models-select" title="Available Models"></select>
84
+ </div>
85
+ <div class="col-auto pr-0">
86
+ <select class="form-select" id="temperature-select" title="Temperature"></select>
87
+ </div>
88
+ <div class="col-auto">
89
+ <button id="screenshot-button" class="btn px-0">
90
+ <i class="fa fa-camera"></i>
91
+ </button>
92
+ </div>
93
+ <div class="col-auto">
94
+ <button id="scroll-to-bottom-button" class="btn px-0">
95
+ <i class="fa fa-angles-down"></i>
96
+ </button>
97
+ </div>
98
+ </div>
99
+ <div class="mt-2 row no-gutters">
100
+ <div class="col-auto pr-0">
101
+ <button id="new-chat-session" class="btn px-0">
102
+ <i class="fa fa-circle-plus"></i>
103
+ </button>
104
+ </div>
105
+ <div class="col px-0">
106
+ <textarea id="user-input" class="form-control" rows="1"
107
+ placeholder="Typing your prompt here ..."></textarea>
108
+ </div>
109
+ <div class="col-auto pr-3 pl-0">
110
+ <button id="send-user-input" class="btn px-0">
111
+ <i class="fa fa-paper-plane"></i>
112
+ </button>
113
+ </div>
114
+ </div>
115
+
116
  </div>
117
+ </div>
118
+ </body>
119
+ <script type="module" src="./main.js"></script>
120
+
121
+ </html>