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

added avatars to mesages

Browse Source
This commit is contained in:
andzejsp 2023-05-25 22:18:33 +03:00
parent ac7ed8b389
commit 6587778e04
2 changed files with 127 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,8 @@
<!-- SENDER -->
<div class="w-10 h-10 rounded-lg object-fill drop-shadow-md">
<img :src="getImgUrl()" class="w-10 h-10 rounded-full object-fill text-red-700">
<img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700">
</div>
<p class="drop-shadow-sm py-0 px-2 text-lg text-opacity-95 font-bold ">{{ message.sender }}</p>
@ -16,15 +16,15 @@
<MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content"></MarkdownRenderer>
<textarea v-if="editMsgMode" ref="mdTextarea" :rows="4"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
:style="{minHeight:mdRenderHeight+`px`}"
placeholder="Enter message here..." v-model="new_message_content"></textarea>
:style="{ minHeight: mdRenderHeight + `px` }" placeholder="Enter message here..."
v-model="new_message_content"></textarea>
</div>
<div class="invisible group-hover:visible flex flex-row mt-3 -mb-2">
<!-- MESSAGE CONTROLS -->
<!-- EDIT CONFIRMATION -->
<div v-if="editMsgMode" class="flex items-center duration-75">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2" title="Cancel edit" type="button"
@click.stop="editMsgMode = false">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2" title="Cancel edit"
type="button" @click.stop="editMsgMode = false">
<i data-feather="x"></i>
</button>
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2" title="Update message"
@ -33,21 +33,22 @@
</button>
</div>
<div v-if="!editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Edit message"
@click.stop="editMsgMode =true">
<div v-if="!editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
title="Edit message" @click.stop="editMsgMode = true">
<i data-feather="edit"></i>
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Copy message to clipboard"
@click.stop="copyContentToClipboard()">
<i data-feather="copy"></i>
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Resend message" @click.stop="resendMessage()">
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Resend message"
@click.stop="resendMessage()">
<i data-feather="refresh-cw"></i>
</div>
<!-- DELETE CONFIRMATION -->
<div v-if="deleteMsgMode" class="flex items-center duration-75">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2" title="Cancel removal" type="button"
@click.stop="deleteMsgMode = false">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2" title="Cancel removal"
type="button" @click.stop="deleteMsgMode = false">
<i data-feather="x"></i>
</button>
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2" title="Confirm removal"
@ -79,37 +80,39 @@
<script>
import botImgPlaceholder from "../assets/logo.svg"
import userImgPlaceholder from "../assets/default_user.svg"
const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
import { nextTick } from 'vue'
import feather from 'feather-icons'
import MarkdownRenderer from './MarkdownRenderer.vue';
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Message',
emits: ['copy', 'delete', 'rankUp', 'rankDown','updateMessage','resendMessage'],
emits: ['copy', 'delete', 'rankUp', 'rankDown', 'updateMessage', 'resendMessage'],
components: {
MarkdownRenderer
},
props: {
message: Object
message: Object,
avatar: ''
},
data() {
return {
senderImg: '',
new_message_content: '',
showConfirmation: false,
editMsgMode: false,
deleteMsgMode: false,
mdRenderHeight:Number
mdRenderHeight: Number
}
}, mounted() {
this.senderImg = botImgPlaceholder
this.new_message_content = this.message.content
nextTick(() => {
feather.replace()
this.mdRenderHeight=this.$refs.mdRender.$el.offsetHeight
this.mdRenderHeight = this.$refs.mdRender.$el.offsetHeight
})
@ -135,20 +138,27 @@ export default {
this.$emit('updateMessage', this.message.id, this.new_message_content)
this.editMsgMode = false
},
resendMessage(){
resendMessage() {
this.$emit('resendMessage', this.message.id, this.new_message_content)
},
getImgUrl() {
if (this.message.sender == "user") {
if (this.avatar) {
return this.avatar
}
return userImgPlaceholder;
}
console.log("Message data")
console.log(this.message)
return botImgPlaceholder;
}
return bUrl + this.avatar
},
defaultImg(event) {
event.target.src = botImgPlaceholder
},
}, watch: {
showConfirmation() {
@ -158,9 +168,9 @@ export default {
})
},
editMsgMode(val){
editMsgMode(val) {
if(!val){
if (!val) {
this.new_message_content = this.message.content
}
@ -169,12 +179,16 @@ export default {
})
},
deleteMsgMode(){
deleteMsgMode() {
nextTick(() => {
feather.replace()
})
},
},
computed: {
}

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

@ -144,7 +144,7 @@
<!-- 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"
@copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage" @rankDown="rankDownMessage"
@updateMessage="updateMessage" @resendMessage="resendMessage" />
@updateMessage="updateMessage" @resendMessage="resendMessage" :avatar="getAvatar(msg.sender)" />
<WelcomeComponent v-if="!currentDiscussion.id" />
@ -187,9 +187,26 @@ export default {
showToast: false,
isSearch: false,
isDiscussionBottom: false,
personalityAvatars: [] // object array of personality name: and avatar: props
}
},
methods: {
async api_get_req(endpoint) {
try {
const res = await axios.get("/" + endpoint);
if (res) {
return res.data
}
} catch (error) {
console.log(error)
return
}
},
async list_discussions() {
try {
const res = await axios.get('/list_discussions')
@ -543,7 +560,7 @@ export default {
const discussion_id = msgObj.discussion_id
// next statement - incorrect comparison: was '=' and should be '=='
this.setDiscussionLoading(discussion_id, true );
this.setDiscussionLoading(discussion_id, true);
if (this.currentDiscussion.id == discussion_id) {
this.isGenerating = true;
@ -692,7 +709,7 @@ export default {
}
return newItem
}).sort(function(a,b){
}).sort(function (a, b) {
return b.id - a.id
})
this.list = newDisList
@ -858,13 +875,65 @@ export default {
if (res) {
this.saveJSONtoFile(res, filename)
this.$refs.toast.showToast("Successfully exported", 4, true)
this.isCheckbox=false
}else{
this.isCheckbox = false
} else {
this.$refs.toast.showToast("Failed to export discussions", 4, false)
}
this.loading = false
}
},
async getPersonalityAvatars() {
let personalities = []
const dictionary = await this.api_get_req("get_all_personalities")
const langkeys = Object.keys(dictionary); // returns languages folder names
for (let i = 0; i < langkeys.length; i++) {
const langkey = langkeys[i];
const catdictionary = dictionary[langkey];
const catkeys = Object.keys(catdictionary); // returns categories
for (let j = 0; j < catkeys.length; j++) {
const catkey = catkeys[j];
const personalitiesArray = catdictionary[catkey];
const modPersArr = personalitiesArray.map((item) => {
let newItem = {}
newItem = item
newItem.category = catkey // add new props to items
newItem.language = langkey // add new props to items
return newItem
})
if (personalities.length == 0) {
personalities = modPersArr
} else {
personalities = personalities.concat(modPersArr)
}
}
}
this.personalityAvatars = personalities.map(item => {
const newItem = {
name: item.name,
avatar: item.avatar
}
return newItem
})
// const index = personalities.findIndex((x) => x.name === sender)
// const pers = personalities[index]
// return pers.avatar
},
getAvatar(sender) {
const index = this.personalityAvatars.findIndex((x) => x.name === sender)
const pers = this.personalityAvatars[index]
if(pers){
return pers.avatar
}
return
}
@ -890,12 +959,14 @@ export default {
socket.on("final", this.finalMsgEvent)
},
activated() {
async activated() {
// This lifecycle hook runs every time you switch from other page back to this page (vue-router)
// To fix scrolling back to last message, this hook is needed.
// If anyone knows hor to fix scroll issue when changing pages, please do fix it :D
console.log("Websocket connected (activated)", this.socketConnected)
await this.getPersonalityAvatars()
if (this.isCreated) {
this.loadLastUsedDiscussion()
}