ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-23 22:32:24 +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

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

@ -12,16 +12,17 @@
</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>

21
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,13 +182,14 @@
</div>
</div>
<div class="container flex flex-row items-center justify-center">
<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>
<!-- CAN ADD FOOTER PANEL HERE -->
</div>
</div>
<Toast ref="toast">