ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-23 14:22:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed scroll bar and UI improvement

Browse Source
This commit is contained in:
AndzejsP 2023-06-03 14:33:13 +03:00
parent 57eddfcea1
commit 5b0757113d
2 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/components/ChatBox.vue
View File

@ -12,17 +12,18 @@
</div>
<form>
<label for="chat" class="sr-only">Send message</label>
<div class="px-3 py-3 rounded-t-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel shadow-lg ">
<div class="px-3 py-3 rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel shadow-lg ">
<!-- FILES -->
<div class="">
<div v-if="fileList.length > 0"
class="flex flex-col max-h-64 ">
<TransitionGroup name="list" tag="div" class="flex flex-col flex-grow overflow-y-scroll mb-2 gap-1 scrollbar-thin scrollbar-track-bg-light-tone-panel 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-if="fileList.length > 0" class="flex flex-col max-h-64 ">
<TransitionGroup name="list" tag="div"
class="flex flex-col flex-grow overflow-y-scroll mb-2 gap-1 scrollbar-thin scrollbar-track-bg-light-tone-panel 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="file in fileList" :key="file.name">
<div class=" cursor-pointer pb-1 flex ">
<div class="flex justify-start p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary-light ">
<div
class="flex justify-start p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary-light ">
<div class=" flex flex-row items-center gap-1 ">
<i data-feather="file" class="w-4 h-5"></i>
<div class="">
@ -30,26 +31,26 @@
</div>
</div>
<div class="flexflex row items-center flex-grow justify-end">
<div class="flex flex-row items-center ">
<div class="">
{{ computedFileSize(file.size) }}
<div class="flexflex row items-center flex-grow justify-end">
<div class="flex flex-row items-center ">
<div class="">
{{ computedFileSize(file.size) }}
</div>
<button type="button" title="Remove item"
class="flex items-center p-0.5 text-sm rounded-sm hover:text-red-600 active:scale-75"
@click="removeItem(file)">
<i data-feather="x" class="w-5 h-5 "></i>
</button>
</div>
<button type="button" title="Remove item"
class="flex items-center p-0.5 text-sm rounded-sm hover:text-red-600 active:scale-75"
@click="removeItem(file)">
<i data-feather="x" class="w-5 h-5 "></i>
</button>
</div>
</div>
</div>
@ -147,8 +148,8 @@ export default {
methods: {
computedFileSize(size) {
nextTick(() => {
feather.replace()
})
feather.replace()
})
return filesize(size)
},
removeItem(file) {

27
web/src/views/DiscussionsView.vue
View File

@ -130,14 +130,14 @@
<DragDrop ref="dragdropDiscussion" @panelDrop="setFileListDiscussion">Drop your discussion file here
</DragDrop>
</div>
<div class="relativeflex flex-row flex-grow ">
<div class="relative flex flex-row flex-grow mb-10">
<!-- DISCUSSION LIST -->
<div class="mx-4 flex flex-col flex-grow" :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
<div :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''"
class="flex flex-col flex-grow overflow-y-auto ">
class="flex flex-col flex-grow ">
<TransitionGroup v-if="list.length > 0" name="list">
<Discussion v-for="(item, index) in list" :key="item.id" :id="item.id" :title="item.title"
:selected="currentDiscussion.id == item.id" :loading="item.loading" :isCheckbox="isCheckbox"
@ -158,14 +158,14 @@
</div>
</div>
</div>
<div
class="relative flex flex-col flex-grow 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"
@dragover.stop.prevent="setDropZoneChat()">
<div class="relative flex flex-col flex-grow " @dragover.stop.prevent="setDropZoneChat()">
<div class="z-20 h-max">
<DragDrop ref="dragdropChat" @panelDrop="setFileListChat"></DragDrop>
</div>
<div id="messages-list" class=" flex-grow overflow-y-scroll " :class="isDragOverChat ? 'pointer-events-none' : ''">
<div id="messages-list"
class=" flex-grow 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"
:class="isDragOverChat ? 'pointer-events-none' : ''">
<!-- CHAT AREA -->
<div class=" container pt-4 pb-10 ">
@ -182,15 +182,16 @@
</div>
<div
class="sticky bottom-0 container flex flex-row items-center justify-center bg-transparent p-4 pt-10 bg-gradient-to-t from-bg-light dark:from-bg-dark from-5% via-bg-light dark:via-bg-dark via-10% to-transparent to-100%">
<ChatBox ref="chatBox" v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
@stopGenerating="stopGenerating" />
</div>
<div class="container flex flex-row items-center justify-center">
<ChatBox ref="chatBox" v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
@stopGenerating="stopGenerating" />
</div>
<!-- CAN ADD FOOTER PANEL HERE -->
</div>
</div>
<Toast ref="toast">
</Toast>
</template>