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

reworked message layout

Browse Source
This commit is contained in:
AndzejsP 2023-06-05 13:47:07 +03:00
parent 4fde7a6c06
commit 1242b69868
1 changed files with 100 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,34 +1,35 @@
<template>
<div
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">
<div class="flex flex-row flex-grow gap-2">
<div class="flex-shrink-0">
<!-- AVATAR -->
<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>
<div class="flex flex-col flex-grow ">
<div class="flex flex-row flex-grow items-start ">
<!-- SENDER NAME -->
<div class="flex flex-grow">
<p class="drop-shadow-sm text-lg text-opacity-95 font-bold ">{{ message.sender }}</p>
</div>
<div class="-mt-4 ml-10 mr-0 pt-1 px-2 break-all">
<!-- CONTENT/MESSAGE -->
<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>
<div class="flex-grow">
</div>
<div class="invisible group-hover:visible flex flex-row mt-3 -mb-2">
<!-- MESSAGE CONTROLS -->
<div class="flex-row justify-end">
<div class="invisible group-hover:visible flex flex-row ">
<!-- 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"
type="button" @click.stop="updateMessage">
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2"
title="Update message" type="button" @click.stop="updateMessage">
<i data-feather="check"></i>
</button>
@ -37,8 +38,8 @@
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()">
<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"
@ -47,12 +48,12 @@
</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"
type="button" @click.stop="deleteMsg()">
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2"
title="Confirm removal" type="button" @click.stop="deleteMsg()">
<i data-feather="check"></i>
</button>
@ -61,7 +62,8 @@
title="Remove message" @click="deleteMsgMode = true">
<i data-feather="trash"></i>
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Upvote" @click.stop="rankUp()">
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Upvote"
@click.stop="rankUp()">
<i data-feather="thumbs-up"></i>
</div>
<div class="flex flex-row items-center">
@ -69,11 +71,34 @@
@click.stop="rankDown()">
<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 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>
<div class="break-all">
<!-- MESSAGE CONTENT -->
<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>
</div>
</div>
</div>
</div>
</template>
@ -152,7 +177,7 @@ export default {
return userImgPlaceholder;
}
if(this.avatar){
if (this.avatar) {
return bUrl + this.avatar
}
return botImgPlaceholder;