chore(首页): 消息头像名称动态展示

src/views/home/components/footer-operation.vue

@@ -112,8 +112,13 @@ function questionSubmit() {
     content: questionContent.value.trim(),
     timestamp: Date.now(),
     isAnswerLoading: false,
+    avatar: '',
+    name: '',
   })
 
+  const agentAvatar = currentAgentApplication.value.agentAvatar
+  const agentName = currentAgentApplication.value.agentTitle
+
   nextTick(() => {
     emit('addMessageItem', latestAssistantMessageKey, {
       role: 'assistant',
@@ -121,6 +126,8 @@ function questionSubmit() {
       content: '',
       timestamp: Date.now(),
       isAnswerLoading: true,
+      avatar: agentAvatar,
+      name: agentName,
     })
 
     emit('messageListScrollToBottom')

src/views/home/components/message-item.vue

@@ -14,25 +14,29 @@ const props = defineProps<Props>()
 const { t } = useI18n()
 const userStore = useUserStore()
 
-const agentAvatarUrl = readonly({ url: 'https://gsst-poe-sit.gz.bcebos.com/icon/agent-avatar.png' })
+const agentDefaultAvatarUrl = readonly({ url: 'https://gsst-poe-sit.gz.bcebos.com/icon/agent-avatar.png' })
 
 const isAgentMessage = computed(() => {
   return props.messageItem.role === 'assistant'
 })
+
+const avatarUrl = computed(() => {
+  return isAgentMessage.value ? props.messageItem.avatar || agentDefaultAvatarUrl.url : userStore.userInfo.avatarUrl
+})
+
+const name = computed(() => {
+  return isAgentMessage.value ? props.messageItem.name || 'AI助理' : userStore.userInfo.nickName
+})
 </script>
 
 <template>
   <div class="mb-[20px] last:mb-0">
     <div class="flex">
-      <img
-        class="h-[36px] w-[36px]"
-        :src="isAgentMessage ? agentAvatarUrl.url : userStore.userInfo.avatarUrl"
-        alt="Avatar"
-      />
+      <img class="h-[36px] w-[36px]" :src="avatarUrl" alt="Avatar" />
 
       <div class="ml-[11px]">
         <div class="mb-[7px] text-[12px] text-[#999]">
-          {{ isAgentMessage ? 'AI助理' : userStore.userInfo.nickName }}
+          {{ name }}
         </div>
         <div
           class="box-content min-h-[21px] min-w-[10px] rounded-[10px] border border-[#9EA3FF] px-[15px] py-[14px] text-justify"

src/views/home/home.vue

@@ -152,11 +152,31 @@ function onGetMessageRecordList(recordId: string) {
 
   const loadingCtl = window.$message.loading(t('home_module.switching_over'))
 
-  fetchMessageRecordList<MessageItemInterface[]>(recordId)
+  fetchMessageRecordList<
+    {
+      role: 'user' | 'assistant'
+      agentId: string
+      agentAvatar: string
+      agentTitle: string
+      content: string
+      timestamp: number
+    }[]
+  >(recordId)
     .then((res) => {
       if (res.data && Array.isArray(res.data)) {
-        const messageListDraft = res.data.map((recordItem) => {
-          return [nanoid(), { ...recordItem, isAnswerLoading: false }]
+        const messageListDraft: (string | MessageItemInterface)[][] = res.data.map((recordItem) => {
+          return [
+            nanoid(),
+            {
+              role: recordItem.role,
+              agentId: recordItem.agentId,
+              content: recordItem.content,
+              isAnswerLoading: false,
+              name: recordItem.agentTitle,
+              avatar: recordItem.agentAvatar,
+              timestamp: recordItem.timestamp,
+            },
+          ]
         })
 
         messageList.value = new Map(messageListDraft as any)

src/views/home/types.d.ts

@@ -13,4 +13,6 @@ export interface MessageItemInterface {
   content: string
   timestamp: number
   isAnswerLoading: boolean
+  avatar: string
+  name: string
 }