added default user and bot img

This commit is contained in:
andzejsp 2023-05-07 18:01:05 +03:00
parent b6e9af166f
commit cc33a1b577
6 changed files with 125 additions and 50 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.5 KiB

File diff suppressed because one or more lines are too long

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-caff7ea5.js"></script>
<link rel="stylesheet" href="/assets/index-4db9d506.css">
<script type="module" crossorigin src="/assets/index-200aefcd.js"></script>
<link rel="stylesheet" href="/assets/index-02b31e38.css">
</head>
<body>
<div id="app"></div>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.5 KiB

View File

@ -3,8 +3,10 @@
class="group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex-row p-4 pb-2">
<div class="w-30 flex">
<!-- SENDER -->
<div class="w-10 h-10 rounded-lg object-fill drop-shadow-md group-even:bg-primary bg-secondary">
<img v-if="senderImg" :src="senderImg" class="w-10 h-10 rounded-full object-fill ">
<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">
</div>
<p class="drop-shadow-sm py-0 px-2 text-lg text-opacity-95 font-bold ">{{ message.sender }}</p>
@ -16,41 +18,38 @@
</div>
<div class="invisible group-hover:visible flex flex-row mt-3 -mb-2">
<!-- MESSAGE CONTROLS -->
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
title="Edit message">
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Edit message">
<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()">
<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">
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Resend message">
<i data-feather="refresh-cw"></i>
</div>
<div class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2"
title="Remove message">
<div class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2" title="Remove message">
<i data-feather="trash"></i>
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
title="Upvote">
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Upvote">
<i data-feather="thumbs-up"></i>
</div>
<div class="flex flex-row items-center">
<div class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2"
title="Downvote">
<i data-feather="thumbs-down"></i>
</div>
<div class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2" title="Downvote">
<i data-feather="thumbs-down"></i>
</div>
<div v-if="message.rank != 0" class="rounded-full px-2 text-sm flex items-center justify-center font-bold"
:class="message.rank > 0 ? 'bg-secondary' : 'bg-red-600'" title="Rank">{{ message.rank }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {nextTick} from 'vue'
import botImgPlaceholder from "../assets/logo.svg"
import userImgPlaceholder from "../assets/default_user.svg"
import { nextTick } from 'vue'
import feather from 'feather-icons'
import MarkdownRenderer from './MarkdownRenderer.vue';
export default {
@ -64,19 +63,31 @@ export default {
},
data() {
return {
senderImg:''
}
},mounted(){
nextTick(()=>{
feather.replace()
})
},methods:{
copyContentToClipboard(){
senderImg: ''
}
}, mounted() {
this.senderImg = botImgPlaceholder
nextTick(() => {
feather.replace()
})
}, methods: {
copyContentToClipboard() {
this.$emit('copy', this.message.content)
navigator.clipboard.writeText(this.message.content);
},
getImgUrl() {
if (this.message.sender == "user") {
return userImgPlaceholder;
}
return botImgPlaceholder;
}
}
},
}
</script>