mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-02-06 19:09:16 +00:00
enhanced ui
This commit is contained in:
Saifeddine ALOUI
parent
4e0638c906
commit
af2ca537a5
@ -1 +1 @@
|
||||
Subproject commit 243ab392acae79bcc7c30e2536a60b1a2f18e006
|
||||
Subproject commit 8f8188d5c530192d6c52dd68b87fb2e0c5fa83ac
|
||||
17
web/dist/assets/index-CMnOu-iP.css
vendored
17
web/dist/assets/index-CMnOu-iP.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
17
web/dist/assets/index-mvOcyhgl.css
vendored
Normal file
17
web/dist/assets/index-mvOcyhgl.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4
web/dist/index.html
vendored
4
web/dist/index.html
vendored
@ -6,8 +6,8 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LoLLMS WebUI</title>
|
||||
<script type="module" crossorigin src="/assets/index-BVKy-umM.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CMnOu-iP.css">
|
||||
<script type="module" crossorigin src="/assets/index-epr3uZW5.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-mvOcyhgl.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -58,35 +58,57 @@
|
||||
<source :src="audio_url" type="audio/wav" ref="audio_player" >
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
<div class="message-details">
|
||||
<div v-if="message.steps.length > 0" class="steps-container">
|
||||
<div class="steps-header" @click="toggleExpanded">
|
||||
<div class="steps-icon">
|
||||
<StatusIcon :status="message.status_message" :icon="true" />
|
||||
</div>
|
||||
<div class="steps-summary">
|
||||
<h3 class="steps-title">Processing Info</h3>
|
||||
<p class="steps-status">{{ message.status_message }}</p>
|
||||
</div>
|
||||
<span class="toggle-icon">{{ expanded ? '▲' : '▼' }}</span>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="expanded" class="steps-content">
|
||||
<ul class="steps-list">
|
||||
<li v-for="(step, index) in message.steps" :key="`step-${message.id}-${index}`" class="step-item">
|
||||
<Step
|
||||
:done="step.done"
|
||||
:text="step.text"
|
||||
:status="step.status"
|
||||
:description="step.description"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="message-details w-full max-w-4xl mx-auto">
|
||||
<!-- Processing Steps Section -->
|
||||
<div v-if="message.steps.length > 0" class="steps-container bg-white/50 dark:bg-gray-800/50 rounded border border-gray-200 dark:border-gray-700 text-sm mb-2">
|
||||
<div
|
||||
class="flex items-center p-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200"
|
||||
@click="toggleExpanded"
|
||||
>
|
||||
<StatusIcon :status="message.status_message" :icon="true" class="w-4 h-4 mr-2" />
|
||||
<span class="text-gray-600 dark:text-gray-300 flex-grow">{{ message.status_message }}</span>
|
||||
<span
|
||||
class="text-xs text-gray-400 transform transition-transform duration-200"
|
||||
:class="{ 'rotate-180': expanded }"
|
||||
>▼</span>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition-all duration-200 ease-out"
|
||||
leave-active-class="transition-all duration-150 ease-in"
|
||||
enter-from-class="opacity-0 max-h-0"
|
||||
enter-to-class="opacity-100 max-h-[500px]"
|
||||
leave-from-class="opacity-100 max-h-[500px]"
|
||||
leave-to-class="opacity-0 max-h-0"
|
||||
>
|
||||
<div v-if="expanded" class="overflow-hidden">
|
||||
<div class="px-2 pb-2 space-y-1">
|
||||
<div
|
||||
v-for="(step, index) in message.steps"
|
||||
:key="`step-${message.id}-${index}`"
|
||||
class="animate-fadeIn"
|
||||
:style="{ animationDelay: `${index * 50}ms` }"
|
||||
>
|
||||
<Step
|
||||
:done="step.done"
|
||||
:text="step.text"
|
||||
:status="step.status"
|
||||
:description="step.description"
|
||||
class="text-xs rounded bg-gray-50/50 dark:bg-gray-700/50 p-2 hover:bg-gray-100 dark:hover:bg-gray-600/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-start w-full overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
|
||||
|
||||
|
||||
<!-- Content Renderer Section -->
|
||||
<div
|
||||
v-if="message.html_js_s && message.html_js_s.length"
|
||||
class="flex flex-col items-start w-full overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary"
|
||||
>
|
||||
<div
|
||||
v-for="(html_js, index) in message.html_js_s"
|
||||
:key="`htmljs-${message.id}-${index}`"
|
||||
@ -973,4 +995,5 @@ details summary::-webkit-details-marker {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,22 +1,47 @@
|
||||
<template>
|
||||
<div class="step-container" :class="{ 'step-done': done }">
|
||||
<div class="step-wrapper">
|
||||
<div class="step-icon">
|
||||
<div
|
||||
class="flex items-center p-2 rounded transition-colors duration-200"
|
||||
:class="[
|
||||
done ? 'bg-opacity-5' : 'bg-opacity-3',
|
||||
status ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-800/20'
|
||||
]"
|
||||
>
|
||||
<div class="flex items-start gap-2 w-full">
|
||||
<div class="w-4 h-4 flex-shrink-0">
|
||||
<template v-if="done">
|
||||
<svg v-if="status" class="icon-success" viewBox="0 0 24 24">
|
||||
<svg
|
||||
v-if="status"
|
||||
class="w-4 h-4 text-green-500 dark:text-green-400"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
|
||||
</svg>
|
||||
<svg v-else class="icon-fail" viewBox="0 0 24 24">
|
||||
<svg
|
||||
v-else
|
||||
class="w-4 h-4 text-red-500 dark:text-red-400"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
|
||||
</svg>
|
||||
</template>
|
||||
<div v-else class="icon-spinner"></div>
|
||||
<div
|
||||
v-else
|
||||
class="w-4 h-4 border-2 border-t-primary rounded-full animate-spin"
|
||||
></div>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<h3 class="step-text">
|
||||
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm text-gray-700 dark:text-gray-200 truncate">
|
||||
{{ text || 'No text provided' }}
|
||||
</h3>
|
||||
<p v-if="description" class="step-description">{{ description }}</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="description"
|
||||
class="text-xs text-gray-500 dark:text-gray-400 truncate"
|
||||
>
|
||||
{{ description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -32,3 +57,18 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.border-t-primary {
|
||||
border-color: #e2e8f0;
|
||||
border-top-color: currentColor;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3569,9 +3569,9 @@ export default {
|
||||
|
||||
socket.onopen = () => {
|
||||
if (this.currentDiscussion!=null){
|
||||
this.setPageTitle(item)
|
||||
this.setPageTitle(this.currentDiscussion.title)
|
||||
localStorage.setItem('selected_discussion', this.currentDiscussion.id)
|
||||
this.load_discussion(item.id, ()=>{
|
||||
this.load_discussion(this.currentDiscussion.id, ()=>{
|
||||
if (this.discussionArr.length > 1) {
|
||||
if (this.currentDiscussion.title === '' || this.currentDiscussion.title === null) {
|
||||
this.changeTitleUsingUserMSG(this.currentDiscussion.id, this.discussionArr[1].content)
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit b881d2d26f9d21373dcc1751d128b23c8b71351d
|
||||
Subproject commit e02812f75dd095fb754a28ce16fecfb93e56e072
|
||||
Loading…
x
Reference in New Issue
Block a user