:zap: [Enhance] Correctly place components in main-container with d-flex css
Browse files- css/default.css +16 -9
- index.html +5 -5
- networks/llm_requester.js +0 -1
css/default.css
CHANGED
|
@@ -20,14 +20,30 @@ body {
|
|
| 20 |
background-color: #ecf1ff;
|
| 21 |
}
|
| 22 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
#top-toolbar {
|
| 24 |
background-color: #e9efff;
|
|
|
|
| 25 |
}
|
| 26 |
|
| 27 |
#chat-session-container {
|
| 28 |
overflow-y: auto;
|
| 29 |
overflow-x: hidden;
|
| 30 |
padding: 0px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 31 |
}
|
| 32 |
|
| 33 |
.message-user,
|
|
@@ -59,14 +75,6 @@ body {
|
|
| 59 |
background-color: #fff5e5;
|
| 60 |
}
|
| 61 |
|
| 62 |
-
#user-interactions {
|
| 63 |
-
box-shadow: 0px 2px 8px 0px rgba(122, 122, 122, 0.4);
|
| 64 |
-
/* background-image: linear-gradient(-45deg, #eef3ff, #e9efff); */
|
| 65 |
-
background-color: #e9efff;
|
| 66 |
-
border-radius: 10px;
|
| 67 |
-
}
|
| 68 |
-
|
| 69 |
-
|
| 70 |
#chat-history-sidebar {
|
| 71 |
box-shadow: 0px 0px 8px 0px rgba(122, 122, 122, 0.4);
|
| 72 |
/* background-image: linear-gradient(-45deg, #eef3ff, #e9efff); */
|
|
@@ -110,7 +118,6 @@ body {
|
|
| 110 |
max-width: 75px;
|
| 111 |
}
|
| 112 |
|
| 113 |
-
|
| 114 |
#scroll-to-bottom-button {
|
| 115 |
z-index: 100;
|
| 116 |
}
|
|
|
|
| 20 |
background-color: #ecf1ff;
|
| 21 |
}
|
| 22 |
|
| 23 |
+
#main-container {
|
| 24 |
+
height: 100vh;
|
| 25 |
+
display: flex;
|
| 26 |
+
flex-direction: column;
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
#top-toolbar {
|
| 30 |
background-color: #e9efff;
|
| 31 |
+
flex: 0 0 auto;
|
| 32 |
}
|
| 33 |
|
| 34 |
#chat-session-container {
|
| 35 |
overflow-y: auto;
|
| 36 |
overflow-x: hidden;
|
| 37 |
padding: 0px;
|
| 38 |
+
flex: 1 1 auto;
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
#user-interactions {
|
| 42 |
+
box-shadow: 0px 2px 8px 0px rgba(122, 122, 122, 0.4);
|
| 43 |
+
/* background-image: linear-gradient(-45deg, #eef3ff, #e9efff); */
|
| 44 |
+
background-color: #e9efff;
|
| 45 |
+
border-radius: 10px;
|
| 46 |
+
flex: 0 0 auto;
|
| 47 |
}
|
| 48 |
|
| 49 |
.message-user,
|
|
|
|
| 75 |
background-color: #fff5e5;
|
| 76 |
}
|
| 77 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 78 |
#chat-history-sidebar {
|
| 79 |
box-shadow: 0px 0px 8px 0px rgba(122, 122, 122, 0.4);
|
| 80 |
/* background-image: linear-gradient(-45deg, #eef3ff, #e9efff); */
|
|
|
|
| 118 |
max-width: 75px;
|
| 119 |
}
|
| 120 |
|
|
|
|
| 121 |
#scroll-to-bottom-button {
|
| 122 |
z-index: 100;
|
| 123 |
}
|
index.html
CHANGED
|
@@ -23,7 +23,6 @@
|
|
| 23 |
</head>
|
| 24 |
|
| 25 |
<body>
|
| 26 |
-
<div id="main-container">
|
| 27 |
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
|
| 28 |
id="chat-history-sidebar" aria-labelledby="chat-history-sidebar-label">
|
| 29 |
<div class="offcanvas-header">
|
|
@@ -50,8 +49,9 @@
|
|
| 50 |
</div>
|
| 51 |
</div>
|
| 52 |
</div>
|
| 53 |
-
|
| 54 |
-
|
|
|
|
| 55 |
<div class="col-auto">
|
| 56 |
<button id="chat-history-sidebar-toggle-button" class="btn px-0">
|
| 57 |
<i class="fa fa-bars"></i>
|
|
@@ -86,10 +86,10 @@
|
|
| 86 |
</div>
|
| 87 |
</div>
|
| 88 |
</div>
|
| 89 |
-
<div id="chat-session-container" class="container">
|
| 90 |
<div id="messagers-container" class="container"></div>
|
| 91 |
</div>
|
| 92 |
-
<div id="user-interactions" class="container
|
| 93 |
<div class="my-2 row no-gutters">
|
| 94 |
<div class="col-auto pr-0">
|
| 95 |
<button id="new-chat-session" class="btn px-0">
|
|
|
|
| 23 |
</head>
|
| 24 |
|
| 25 |
<body>
|
|
|
|
| 26 |
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
|
| 27 |
id="chat-history-sidebar" aria-labelledby="chat-history-sidebar-label">
|
| 28 |
<div class="offcanvas-header">
|
|
|
|
| 49 |
</div>
|
| 50 |
</div>
|
| 51 |
</div>
|
| 52 |
+
<div id="main-container" class="container">
|
| 53 |
+
<div id="top-toolbar" class="container mt-2">
|
| 54 |
+
<div class="my-1 row no-gutters justify-content-start">
|
| 55 |
<div class="col-auto">
|
| 56 |
<button id="chat-history-sidebar-toggle-button" class="btn px-0">
|
| 57 |
<i class="fa fa-bars"></i>
|
|
|
|
| 86 |
</div>
|
| 87 |
</div>
|
| 88 |
</div>
|
| 89 |
+
<div id="chat-session-container" class="container mt-1">
|
| 90 |
<div id="messagers-container" class="container"></div>
|
| 91 |
</div>
|
| 92 |
+
<div id="user-interactions" class="container mb-2">
|
| 93 |
<div class="my-2 row no-gutters">
|
| 94 |
<div class="col-auto pr-0">
|
| 95 |
<button id="new-chat-session" class="btn px-0">
|
networks/llm_requester.js
CHANGED
|
@@ -92,7 +92,6 @@ export class ChatCompletionsRequester {
|
|
| 92 |
let input = buffer.substring(0, boundary);
|
| 93 |
buffer = buffer.substring(boundary + 1);
|
| 94 |
let json_chunks = jsonize_stream_data(input);
|
| 95 |
-
console.log(json_chunks);
|
| 96 |
update_message(json_chunks);
|
| 97 |
}
|
| 98 |
return reader.read().then(process);
|
|
|
|
| 92 |
let input = buffer.substring(0, boundary);
|
| 93 |
buffer = buffer.substring(boundary + 1);
|
| 94 |
let json_chunks = jsonize_stream_data(input);
|
|
|
|
| 95 |
update_message(json_chunks);
|
| 96 |
}
|
| 97 |
return reader.read().then(process);
|