mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-19 12:27:52 +00:00
added avatars to mesages
This commit is contained in:
andzejsp
parent
ac7ed8b389
commit
6587778e04
@ -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,6 +80,7 @@
|
||||
<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';
|
||||
@ -90,12 +92,13 @@ export default {
|
||||
MarkdownRenderer
|
||||
},
|
||||
props: {
|
||||
message: Object
|
||||
message: Object,
|
||||
avatar: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
senderImg: '',
|
||||
|
||||
new_message_content: '',
|
||||
showConfirmation: false,
|
||||
editMsgMode: false,
|
||||
@ -104,7 +107,7 @@ export default {
|
||||
|
||||
}
|
||||
}, mounted() {
|
||||
this.senderImg = botImgPlaceholder
|
||||
|
||||
this.new_message_content = this.message.content
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
@ -141,14 +144,21 @@ export default {
|
||||
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() {
|
||||
@ -175,6 +185,10 @@ export default {
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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')
|
||||
@ -865,6 +882,58 @@ export default {
|
||||
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()
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user