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

Merge pull request #225 from andzejsp/transitions

Browse Source 
Transitions
This commit is contained in:
Saifeddine ALOUI 2023-05-26 20:50:22 +02:00 committed by GitHub
commit 626d603c66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 138 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/dist/assets/index-2548679d.js → web/dist/assets/index-00e35e66.js vendored
View File

File diff suppressed because one or more lines are too long

1
web/dist/assets/index-2bd2bbf7.css vendored
View File

File diff suppressed because one or more lines are too long

1
web/dist/assets/index-7d465d2b.css vendored Normal file
View File

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>GPT4All - WEBUI</title>
<script type="module" crossorigin src="/assets/index-2548679d.js"></script>
<link rel="stylesheet" href="/assets/index-2bd2bbf7.css">
<script type="module" crossorigin src="/assets/index-00e35e66.js"></script>
<link rel="stylesheet" href="/assets/index-7d465d2b.css">
</head>
<body>
<div id="app"></div>

4
web/src/components/Message.vue
View File

@ -152,8 +152,10 @@ export default {
return userImgPlaceholder;
}
if(this.avatar){
return bUrl + this.avatar
}
return botImgPlaceholder;
},
defaultImg(event) {

2
web/src/components/Toast.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="absolute bottom-16 right-2 z-20 flex flex-col gap-3">
<div class="absolute bottom-16 right-2 z-20 flex flex-col gap-3 min-w-[300px]">
<TransitionGroup name="toastItem" tag="div">
<div v-for=" t in toastArr" :key="t.id">
<div id="toast-success"

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

@ -50,8 +50,12 @@
</div>
</div>
<!-- SEARCH BAR -->
<div class="flex-row items-center gap-3 flex-0 w-full">
<div v-if="isSearch" class="p-4 pt-2">
<!-- <Transition name="expand" > -->
<div key="1" v-if="isSearch" class="flex-row items-center gap-3 flex-0 w-full">
<div class="p-4 pt-2 ">
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<div class="scale-75">
@ -71,7 +75,9 @@
@input="filterDiscussions()" />
</div>
</div>
</div>
<!-- </Transition> -->
<hr v-if="isCheckbox" class="h-px bg-bg-light p-0 mb-4 px-4 mx-4 border-0 dark:bg-bg-dark">
<div v-if="isCheckbox" class="flex flex-row flex-grow p-4 pt-0 items-center">
@ -119,17 +125,18 @@
<div class="relative overflow-y-scroll no-scrollbar">
<!-- DISCUSSION LIST -->
<div class="mx-4 flex-grow" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''">
<Discussion v-for="(item, index) in list" :key="index" :id="item.id" :title="item.title"
<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"
:checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)" @delete="deleteDiscussion(item.id)"
@editTitle="editTitle" @checked="checkUncheckDiscussion" />
</TransitionGroup>
<div v-if="list.length < 1"
class="gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer">
<p class="px-3">No discussions are found</p>
</div>
<div
class="sticky bottom-0 bg-gradient-to-t pointer-events-none from-bg-light-tone dark:from-bg-dark-tone flex height-64">
class="sticky bottom-0 bg-gradient-to-t pointer-events-none from-bg-light-tone dark:from-bg-dark-tone flex flex-grow">
<!-- FADING DISCUSSION LIST END ELEMENT -->
</div>
</div>
@ -140,15 +147,14 @@
<!-- CHAT AREA -->
<div class="container flex flex-col flex-grow pt-4 pb-10">
<!-- REMOVED @click="scrollToElement($event.target)" -->
<!-- Removed reference to copyToClipBoard() ; function was moved to Message.vue -->
<Message v-for="(msg, index) in discussionArr" :key="index" :message="msg" :id="'msg-' + msg.id" ref="messages"
<TransitionGroup v-if="discussionArr.length>0" name="list" >
<Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id" ref="messages"
@copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage" @rankDown="rankDownMessage"
@updateMessage="updateMessage" @resendMessage="resendMessage" :avatar="getAvatar(msg.sender)" />
<WelcomeComponent v-if="!currentDiscussion.id" />
</TransitionGroup>
<WelcomeComponent v-if="!currentDiscussion.id" />
</div>
<div class=" sticky bottom-0">
<ChatBox v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
@ -159,12 +165,46 @@
<Toast ref="toast">
</Toast>
</template>
<style scoped>
.height-64 {
min-height: 64px;
.expand-enter-active,
.expand-leave-active {
transition: all 0.5s ease;
}
.expand-enter{
transition: all 0.5s ease;
opacity: 1;
transform: translatey(30px);
}
.expand-leave-to {
transform: translatey(-30px);
opacity: 0;
}
.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from {
transform: translatey(-30px);
}
.list-leave-to {
opacity: 0;
transform: translatey(30px);
}
/* ensure leaving items are taken out of layout flow so that moving
animations can be calculated correctly. */
.list-leave-active {
position: absolute;
}
</style>
<script>
export default {
@ -526,6 +566,10 @@ export default {
},
sendMsg(msg) {
// Sends message to binding
if(!msg){
this.$refs.toast.showToast("Message contains no centent!", 4, false)
return
}
this.isGenerating = true;
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating);
axios.get('/get_generation_status', {}).then((res) => {
@ -1036,7 +1080,7 @@ import Toast from '../components/Toast.vue'
import feather from 'feather-icons'
import axios from 'axios'
import { nextTick } from 'vue'
import { nextTick,TransitionGroup } from 'vue'
import socket from '@/services/websocket.js'

49
web/src/views/SettingsView.vue
View File

@ -95,12 +95,14 @@
</label>
<div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 "
:class="mzl_collapsed ? '' : 'max-h-96'">
<TransitionGroup name="list" >
<model-entry v-for="(model, index) in models" :key="index" :title="model.title"
:icon="model.icon" :path="model.path" :owner="model.owner" :owner_link="model.owner_link"
:license="model.license" :description="model.description" :is-installed="model.isInstalled"
:on-install="onInstall" :on-uninstall="onUninstall" :on-selected="onSelected"
:selected="model.title === configFile.model" :model="model" />
</div>
</TransitionGroup>
</div>
</div>
<!-- EXPAND / COLLAPSE BUTTON -->
<button v-if="mzl_collapsed"
@ -179,10 +181,12 @@
<div ref="personalitiesZoo"
class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
:class="pzl_collapsed ? '' : 'max-h-96'">
<TransitionGroup name="bounce" >
<personality-entry v-for="(pers, index) in personalitiesFiltered" :key="index"
:personality="pers"
:selected="pers.name === configFile.personality && pers.category === configFile.personality_category && pers.language === configFile.personality_language"
:on-selected="onPersonalitySelected" />
</TransitionGroup>
</div>
</div>
<!-- EXPAND / COLLAPSE BUTTON -->
@ -377,11 +381,48 @@
</template>
<style scoped>
.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from {
transform: translatey(-30px);
}
.list-leave-to {
opacity: 0;
transform: translatey(30px);
}
/* ensure leaving items are taken out of layout flow so that moving
animations can be calculated correctly. */
.list-leave-active {
position: absolute;
}
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
</style>
<script>
import axios from "axios";
import feather from 'feather-icons'
import { nextTick } from 'vue'
import { nextTick,TransitionGroup } from 'vue'
import MessageBox from "@/components/MessageBox.vue";
import YesNoDialog from "@/components/YesNoDialog.vue";
import Toast from '../components/Toast.vue'
@ -492,7 +533,7 @@ export default {
// if (model_object.isInstalled) {
this.settingsChanged = true
const res = this.update_setting('personality', pers.personality.name, () => {
this.$refs.toast.showToast("Personality:\n" + pers.personality.name + "\nselected", 4, true)
this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name , 4, true)
this.configFile.personality = pers.personality.name
this.configFile.personality_category = pers.personality.category
this.configFile.personality_language = pers.personality.language
@ -525,7 +566,7 @@ export default {
if (this.configFile.model != model_object.title) {
this.update_model(model_object.title)
this.configFile.model = model_object.title
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nselected", 4, true)
this.$refs.toast.showToast("Selected model:\n" + model_object.title , 4, true)
this.settingsChanged = true
this.isModelSelected = true
}