Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@BorjaOteroFerreira
BorjaOteroFerreira committed Feb 28, 2024
1 parent d742f5a commit f84fc34
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 35 deletions.
11 changes: 4 additions & 7 deletions static/js/chat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -393,27 +393,24 @@ function sanitizeMessage(message) {
console.log(str);
}

toggleSidebar() {
var sidebar = document.getElementById('sidebar');
var chatContainer = document.getElementById('main-container');

toggleSidebar(element) {
var sidebar = document.getElementById(element);
// Verificar si las media queries están activas
var mediaQueriesActive = window.matchMedia("(max-width: 1023px)").matches || window.matchMedia("(max-height: 740px)").matches;

// Solo ejecutar el código si las media queries no están activas
if (!mediaQueriesActive) {
if (sidebar.style.display === 'none' || sidebar.style.display === '') {
sidebar.style.display = 'block';
chatContainer.style.marginRight = '20%'; // Ajustar el margen derecho para dejar espacio al sidebar
sidebar.style.display = 'inline-block';
} else {
sidebar.style.display = 'none';
chatContainer.style.marginRight = '20px'; // Restaurar el margen derecho a 0
}
}
else{
sidebar.style.display = (sidebar.style.display === 'none' || sidebar.style.display === '') ? 'block' : 'none';
}
}

escapeHtml(text) {
var map = {
'&': '&',
Expand Down
47 changes: 27 additions & 20 deletions static/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ h1{
flex-direction:row;
max-height:calc(100vh);
}
#history-chats{
#chat-sidebar{
display: flex;
flex-direction: column;
margin: 20px;
Expand All @@ -53,7 +53,7 @@ h1{
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
padding:2em;
padding:1em;

}

Expand All @@ -69,6 +69,7 @@ h1{
margin-top:15px;
text-align: left;
border:none;
font-size:0.85em;
}
.load-history:hover{
color: var(--secondary-bg-color);
Expand Down Expand Up @@ -241,11 +242,11 @@ h1{
font-weight: bold;
}

#sidebar {
#config-sidebar {
height: 100vh;
width:19.8%;
display: none;
position: fixed;
position: relative;
top: 0;
color: var(--primary-color);
right: 0;
Expand All @@ -255,22 +256,22 @@ h1{

}

#sidebar h5 {
#config-sidebar h5 {
color: var(--primary-color);
margin-bottom: 10px;
}

#sidebar .form-group {
#config-sidebar .form-group {
margin-bottom: 15px;
}

#sidebar label {
#config-sidebar label {
display: block;
margin-bottom: 5px;
color: var(--primary-color);
}

#sidebar input {
#config-sidebar input {
width: 100%;
padding: 8px;
border: 1px solid var(--primary-color);
Expand All @@ -288,7 +289,7 @@ input:focus {
border: 1px solid var(--primary-color);
}

#sidebar button {
#config-sidebar button {
width: 100%;
padding: 8px;
background-color: var(--secondary-bg-color);
Expand All @@ -299,7 +300,7 @@ input:focus {
border-radius:5px;
}

#sidebar button:hover {
#config-sidebar button:hover {
width: 100%;
padding: 8px;
background-color: var(--secondary-color);
Expand All @@ -309,7 +310,7 @@ input:focus {

}

#sidebar select {
#config-sidebar select {
width: 100%;
padding: 8px;
height:35px;
Expand Down Expand Up @@ -450,7 +451,7 @@ input:focus {

}

#toggle-sidebar-button{
#toggle-config-button{
font-size: 1.3em;
padding:2px;
width:30px;
Expand All @@ -459,7 +460,7 @@ input:focus {


}
#toggle-sidebar-button:hover{
#toggle-config-button:hover{
font-size:1.6em;
}

Expand Down Expand Up @@ -559,6 +560,10 @@ textarea{
margin-left:5px;
}
@media (max-width: 1023px) {
#conversations-list {
position:fixed;

}
.popup-container {
position: absolute;
width:300px;
Expand Down Expand Up @@ -625,34 +630,36 @@ margin-left:5px;
.assistant-message-container {
width:95%;
}
#sidebar{
#config-sidebar{
margin-top:90px;
width:100%;
display: none;
position:fixed

}
#toggle-sidebar-button{
#toggle-config-button{
max-width:100%;
margin-left:0%;
}
}
@media (max-height: 740px) {

#sidebar{
#config-sidebar{
margin-top:90px;
font-size: 10px;

}
#sidebar h5{
#config-sidebar h5{
font-size:12px
}

#sidebar select,textarea{
#config-sidebar select,textarea{
max-height:30px;
}
#sidebar input{
#config-sidebar input{
max-height:20px;
}
#sidebar button{
#config-sidebar button{
margin-bottom:5px;
font-size:12px;
}
Expand Down
16 changes: 8 additions & 8 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</head>
<body>
<div id="container">
<div id="history-chats">
<div id="chat-sidebar">
<div id="header-chat-menu">
<button class="btn btn-secondary" id="clear-context-button" onclick="chat.newChat()">New chat 🧠</button>
</div>
Expand All @@ -42,18 +42,18 @@
</div>

<div id="footer" >
<button class="btn btn-primary" id="start-tour-button" onclick="toggleSidebar()">&nbsp;❔&nbsp;</button>
<button class="btn btn-primary" id="start-tour-button" onclick="toggleSidebar()">&nbsp;🧾&nbsp;</button>
<button id="start-tour-button" onclick="toggleSidebar('config-sidebar')">&nbsp;❔&nbsp;</button>
<button id="start-tour-button" onclick="toggleSidebar('chat-sidebar')">&nbsp;🧾&nbsp;</button>

<div class="form-group" style="position: relative;">
<button id="stop-button" onclick="chat.stopResponse()">Stop</button>
<textarea class="form-control" id="user-input" placeholder="Write your message"></textarea>
<button class="btn btn-primary" id="send-button" onclick="chat.sendMessage()">Send</button>
</div>
<button id="toggle-sidebar-button" onclick="chat.toggleSidebar()">&nbsp;⚙️&nbsp;</button>
<button id="toggle-config-button" onclick="chat.toggleSidebar('config-sidebar')">&nbsp;⚙️&nbsp;</button>
</div>
</div>
<div id="sidebar">
<div id="config-sidebar">
<h5>Model configuration</h5>
<div class="form-group">
<label for="model-select">Model:</label>
Expand Down Expand Up @@ -100,7 +100,7 @@ <h5>Model configuration</h5>
const chat = new Chat();
const driver = window.driver.js.driver;
const guiaConfiguracion = [
{ element: '#toggle-sidebar-button', popover: { title: 'Settings menu',
{ element: '#toggle-config-button', popover: { title: 'Settings menu',
description: 'Press the Menu button to open and close the model settings menu', position: 'right' } },
{ element: '#model-select', popover: { title: 'Select a model',
description: 'Choose the model you are going to use. Remember that you must download your model in .gguf format and move/copy it to the model\'s folder', position: 'right' } },
Expand Down Expand Up @@ -132,9 +132,9 @@ <h5>Model configuration</h5>
steps: guiaConfiguracion
});
function toggleSidebar(){
var sidebar = document.getElementById('sidebar');
var sidebar = document.getElementById('config-sidebar');
if (sidebar.style.display === 'none' || sidebar.style.display === '') {
chat.toggleSidebar(); // Llamar a toggleSidebar solo si el menú está oculto
chat.toggleSidebar('config-sidebar'); // Llamar a toggleSidebar solo si el menú está oculto
}
driverObj.drive();
};
Expand Down

0 comments on commit f84fc34

Please sign in to comment.