enhanced ui

This commit is contained in:
Saifeddine ALOUI 2023-07-27 00:03:28 +02:00
parent ffd799a1c8
commit d1078fa257
6 changed files with 52 additions and 20 deletions

View File

@ -156,14 +156,21 @@ class LoLLMsAPPI(LollmsApplication):
"cancel_generation": False,
"generation_thread": None,
"current_discussion":None,
"current_message_id":0
"current_message_id":0,
"current_ai_message_id":0,
"current_user_message_id":0,
"processing":False,
"schedule_for_deletion":False
}
ASCIIColors.success(f'Client {request.sid} connected')
@socketio.on('disconnect')
def disconnect():
try:
del self.connections[request.sid]
if self.connections[request.sid]["processing"]:
self.connections[request.sid]["schedule_for_deletion"]=True
else:
del self.connections[request.sid]
except Exception as ex:
pass
@ -938,6 +945,7 @@ class LoLLMsAPPI(LollmsApplication):
self.discussion_messages, self.current_message, tokens = self.prepare_query(message_id, is_continue)
self.prepare_reception(client_id)
self.generating = True
self.connections[client_id]["processing"]=True
self.generate(
self.discussion_messages,
self.current_message,
@ -948,7 +956,6 @@ class LoLLMsAPPI(LollmsApplication):
print()
print("## Done Generation ##")
print()
self.current_discussion.update_message(self.current_ai_message_id, self.connections[client_id]["generated_text"].strip())
self.full_message_list.append(self.connections[client_id]["generated_text"])
self.cancel_gen = False
@ -977,6 +984,9 @@ class LoLLMsAPPI(LollmsApplication):
)
self.socketio.sleep(0.01)
self.connections[client_id]["processing"]=False
if self.connections[client_id]["schedule_for_deletion"]:
del self.connections[client_id]
ASCIIColors.success(f" ╔══════════════════════════════════════════════════╗ ")
ASCIIColors.success(f" ║ Done ║ ")

8
web/dist/assets/index-3a2a1b2d.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI - Welcome</title>
<script type="module" crossorigin src="/assets/index-63f9e2d9.js"></script>
<link rel="stylesheet" href="/assets/index-e1cab70f.css">
<script type="module" crossorigin src="/assets/index-b5959380.js"></script>
<link rel="stylesheet" href="/assets/index-3a2a1b2d.css">
</head>
<body>
<div id="app"></div>

View File

@ -4,9 +4,9 @@
<i data-feather="command" class="w-5 h-5"></i>
</button>
<transition name="slide">
<div v-if="isMenuOpen" class="menu-list" :style="menuPosition" ref="menu">
<ul>
<li v-for="(command, index) in commands" :key="index" @click="executeCommand(command)" class="menu-command hover:bg-blue-400 ">
<div v-if="isMenuOpen" class="menu-list flex-grow" :style="menuPosition" ref="menu">
<ul class="flex-grow">
<li v-for="(command, index) in commands" :key="index" @click="executeCommand(command)" class="menu-command flex-grow hover:bg-blue-400 ">
<img v-if="command.icon && !command.is_file" :src="command.icon" :alt="command.name" class="menu-icon">
<span v-else class="menu-icon"></span>
<span>{{ command.name }}</span>
@ -39,9 +39,25 @@
};
},
methods: {
handleClickOutside(event) {
// Close the menu if the click occurs outside the menu container
const menuContainer = this.$refs.menu;
const menuButton = this.$refs.menuButton;
if (menuContainer && !menuContainer.contains(event.target) && !menuButton.contains(event.target)) {
this.isMenuOpen = false;
window.removeEventListener('click', this.handleClickOutside);
}
},
toggleMenu() {
this.positionMenu();
this.isMenuOpen = !this.isMenuOpen;
if (this.isMenuOpen) {
// Attach the click event listener when the menu opens
window.addEventListener('click', this.handleClickOutside);
} else {
// Remove the click event listener when the menu closes
window.removeEventListener('click', this.handleClickOutside);
}
},
executeCommand(command) {
if (typeof this[command.value] === 'function') {
@ -98,11 +114,12 @@
.menu-list {
position: absolute;
background-color: white;
color: black;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 10px;
min-width: 150px;
max-width: 500px;
z-index: 1000;
}
@ -134,5 +151,10 @@
height: 20px;
margin-right: 8px;
}
.menu-command{
min-width: 200px;
text-align: left;
}
</style>