【优化】AI:对话的 user、role 头像从前端获取

This commit is contained in:
YunaiV 2024-05-25 11:49:23 +08:00
parent 46eb89695d
commit cdf0a1137d
3 changed files with 75 additions and 86 deletions

View File

@ -43,7 +43,7 @@
:class="conversation.id === activeConversationId ? 'conversation active' : 'conversation'"
>
<div class="title-wrapper">
<img class="avatar" :src="conversation.roleAvatar"/>
<img class="avatar" :src="conversation.roleAvatar || roleAvatarDefaultImg"/>
<span class="title">{{ conversation.title }}</span>
</div>
<div class="button-wrapper" v-show="hoverConversationId === conversation.id">
@ -99,6 +99,7 @@ import {ChatConversationApi, ChatConversationVO} from '@/api/ai/chat/conversatio
import {ref} from "vue";
import Role from "@/views/ai/chat/role/index.vue";
import {Bottom, Top} from "@element-plus/icons-vue";
import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
const message = useMessage() //

View File

@ -1,10 +1,10 @@
<template>
<div ref="messageContainer" style="height: 100%; overflow-y: auto; position: relative">
<div class="chat-list" v-for="(item, index) in messageList" :key="index">
<div class="chat-list" v-for="(item, index) in list" :key="index">
<!-- 靠左 message -->
<div class="left-message message-item" v-if="item.type !== 'user'">
<div class="avatar">
<el-avatar :src="item.roleAvatar" />
<el-avatar :src="roleAvatar" />
</div>
<div class="message">
<div>
@ -26,7 +26,7 @@
<!-- 靠右 message -->
<div class="right-message message-item" v-if="item.type === 'user'">
<div class="avatar">
<el-avatar :src="item.userAvatar" />
<el-avatar :src="userAvatar" />
</div>
<div class="message">
<div>
@ -70,12 +70,19 @@ import { useClipboard } from '@vueuse/core'
import { PropType } from 'vue'
import { ArrowDownBold, Edit, RefreshRight } from '@element-plus/icons-vue'
import { ChatConversationVO } from '@/api/ai/chat/conversation'
import {useUserStore} from '@/store/modules/user';
import userAvatarDefaultImg from '@/assets/imgs/avatar.gif'
import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
const { copy } = useClipboard() // copy
// ()
const messageContainer: any = ref(null)
const isScrolling = ref(false) //
const userStore = useUserStore()
const userAvatar = computed(() => userStore.user.avatar ?? userAvatarDefaultImg)
const roleAvatar = computed(() => props.conversation.roleAvatar ?? roleAvatarDefaultImg)
// props
const props = defineProps({
conversation: {
@ -88,20 +95,6 @@ const props = defineProps({
}
})
const messageList = computed(() => {
if (props.list && props.list.length > 0) {
return props.list
}
if (props.conversation && props.conversation.systemMessage) {
return [{
id: 0,
type: 'system',
content: props.conversation.systemMessage
}]
}
return []
})
// ============ ==============
const scrollToBottom = async (isIgnore?: boolean) => {

View File

@ -1,7 +1,8 @@
<template>
<el-container class="ai-layout">
<!-- 左侧对话列表 -->
<Conversation :active-id="activeConversationId"
<Conversation
:active-id="activeConversationId"
ref="conversationRef"
@onConversationCreate="handleConversationCreate"
@onConversationClick="handleConversationClick"
@ -22,7 +23,7 @@
</el-button>
<el-button size="small" class="btn" @click="handlerMessageClear">
<!-- TODO @fanstyle 部分可以考虑用 unocss 替代 -->
<img src="@/assets/ai/clear.svg" style="height: 14px;" />
<img src="@/assets/ai/clear.svg" style="height: 14px" />
</el-button>
<!-- TODO @fan下面两个 icon可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
<el-button size="small" :icon="Download" class="btn" />
@ -36,14 +37,19 @@
<div class="message-container">
<MessageLoading v-if="listLoading" />
<MessageNewChat v-if="!activeConversation" @on-new-chat="handlerNewChat" />
<ChatEmpty v-if="!listLoading && messageList.length === 0 && activeConversation" @on-prompt="doSend"/>
<Message v-if="!listLoading && messageList.length > 0"
<ChatEmpty
v-if="!listLoading && messageList.length === 0 && activeConversation"
@on-prompt="doSend"
/>
<Message
v-if="!listLoading && messageList.length > 0"
ref="messageRef"
:conversation="activeConversation"
:list="messageList"
@on-delete-success="handlerMessageDelete"
@on-edit="handlerMessageEdit"
@on-refresh="handlerMessageRefresh"/>
@on-refresh="handlerMessageRefresh"
/>
</div>
</div>
</el-main>
@ -62,7 +68,8 @@
></textarea>
<div class="prompt-btns">
<div>
<el-switch v-model="enableContext" /> <span style="font-size: 14px; color: #8f8f8f;">上下文</span>
<el-switch v-model="enableContext" />
<span style="font-size: 14px; color: #8f8f8f">上下文</span>
</div>
<el-button
type="primary"
@ -104,9 +111,8 @@ import MessageLoading from './MessageLoading.vue'
import MessageNewChat from './MessageNewChat.vue'
import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
import ChatConversationUpdateForm from "@/views/ai/chat/components/ChatConversationUpdateForm.vue";
import {Download, Top} from "@element-plus/icons-vue";
import ChatConversationUpdateForm from '@/views/ai/chat/components/ChatConversationUpdateForm.vue'
import { Download, Top } from '@element-plus/icons-vue'
const route = useRoute() //
const message = useMessage() //
@ -118,14 +124,13 @@ const conversationInProgress = ref(false) // 对话进行中
const conversationInAbortController = ref<any>() // abort ( stream )
const inputTimeout = ref<any>() //
const prompt = ref<string>() // prompt
const userInfo = ref<ProfileVO>() //
const enableContext = ref<boolean>(true) //
// TODO @fanfullText Text
const fullText = ref('');
const displayedText = ref('');
const textSpeed = ref<number>(50); // Typing speed in milliseconds
const textRoleRunning = ref<boolean>(false); // Typing speed in milliseconds
const fullText = ref('')
const displayedText = ref('')
const textSpeed = ref<number>(50) // Typing speed in milliseconds
const textRoleRunning = ref<boolean>(false) // Typing speed in milliseconds
// chat message
// TODO @fanlistlistLoadinglistLoadingTime
@ -139,13 +144,14 @@ const conversationRef = ref()
const isComposing = ref(false) //
// role
const defaultRoleAvatar = 'http://test.yudao.iocoder.cn/eaef5f41acb911dd718429a0702dcc3c61160d16e57ba1d543132fab58934f9f.png'
const defaultRoleAvatar =
'http://test.yudao.iocoder.cn/eaef5f41acb911dd718429a0702dcc3c61160d16e57ba1d543132fab58934f9f.png'
// ===========
// TODO @fan
const textRoll = async () => {
let index = 0;
let index = 0
try {
//
if (textRoleRunning.value) {
@ -174,8 +180,8 @@ const textRoll = async () => {
// console.log('index < fullText.value.length', index < fullText.value.length, conversationInProgress.value)
if (index < fullText.value.length) {
displayedText.value += fullText.value[index];
index++;
displayedText.value += fullText.value[index]
index++
// message
const lastMessage = list.value[list.value.length - 1]
@ -185,24 +191,23 @@ const textRoll = async () => {
//
await scrollToBottom()
//
timer = setTimeout(task, textSpeed.value);
timer = setTimeout(task, textSpeed.value)
} else {
//
if (!conversationInProgress.value) {
textRoleRunning.value = false
clearTimeout(timer);
console.log("字体滚动退出!")
clearTimeout(timer)
console.log('字体滚动退出!')
} else {
//
timer = setTimeout(task, textSpeed.value);
timer = setTimeout(task, textSpeed.value)
}
}
}
let timer = setTimeout(task, textSpeed.value);
let timer = setTimeout(task, textSpeed.value)
} finally {
}
};
}
// ============ ==============
@ -266,12 +271,12 @@ const onSend = async (event) => {
if (event.key === 'Enter') {
if (event.shiftKey) {
//
prompt.value += '\r\n';
event.preventDefault(); //
prompt.value += '\r\n'
event.preventDefault() //
} else {
//
await doSend(content)
event.preventDefault(); //
event.preventDefault() //
}
}
}
@ -317,13 +322,11 @@ const doSendStream = async (userMessage: ChatMessageVO) => {
fullText.value = ''
try {
// stream
// TODO @fanidea
list.value.push({
id: -1,
conversationId: activeConversationId.value,
type: 'user',
content: userMessage.content,
userAvatar: userInfo.value?.avatar,
createTime: new Date()
} as ChatMessageVO)
list.value.push({
@ -331,7 +334,6 @@ const doSendStream = async (userMessage: ChatMessageVO) => {
conversationId: activeConversationId.value,
type: 'system',
content: '思考中...',
roleAvatar: (activeConversation.value as ChatConversationVO).roleAvatar,
createTime: new Date()
} as ChatMessageVO)
//
@ -415,11 +417,13 @@ const messageList = computed(() => {
// systemMessage
// TODO add by
if (activeConversation.value?.systemMessage) {
return [{
return [
{
id: 0,
type: 'system',
content: activeConversation.value.systemMessage
}]
}
]
}
return []
})
@ -438,13 +442,7 @@ const getMessageList = async () => {
return
}
//
const messageListRes = await ChatMessageApi.messageList(activeConversationId.value)
//
messageListRes.map(item => {
// role
item.roleAvatar = item.roleAvatar ? item.roleAvatar : defaultRoleAvatar
})
list.value = messageListRes
list.value = await ChatMessageApi.messageList(activeConversationId.value)
//
await nextTick(() => {
//
@ -466,7 +464,6 @@ const openChatConversationUpdateForm = async () => {
chatConversationUpdateFormRef.value.open(activeConversationId.value)
}
/**
* 对话 - 标题修改成功
*/
@ -489,7 +486,7 @@ const handleConversationCreate = async () => {
const handleConversationClick = async (conversation: ChatConversationVO) => {
//
if (conversationInProgress.value) {
await message.alert("对话中,不允许切换!")
await message.alert('对话中,不允许切换!')
return false
}
@ -596,7 +593,7 @@ const handlerMessageClear = async () => {
}
// TODO @fan try catch
//
await message.delConfirm("确认清空对话消息?")
await message.delConfirm('确认清空对话消息?')
//
await ChatMessageApi.deleteByConversationId(activeConversationId.value as string)
// TODO @fan
@ -615,8 +612,6 @@ onMounted(async () => {
//
listLoading.value = true
await getMessageList()
//
userInfo.value = await getUserProfile()
})
</script>