【解决todo】AI Chat stream 增加默认头像

src/assets/ai/gpt.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716345268026" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5622" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M956.408445 419.226665a250.670939 250.670939 0 0 0-22.425219-209.609236A263.163526 263.163526 0 0 0 652.490412 85.715535 259.784384 259.784384 0 0 0 457.728923 0.008192a261.422756 261.422756 0 0 0-249.44216 178.582564 258.453206 258.453206 0 0 0-172.848261 123.901894c-57.03583 96.868753-44.031251 219.132275 32.153053 302.279661a250.670939 250.670939 0 0 0 22.32282 209.609237 263.163526 263.163526 0 0 0 281.595213 123.901893A259.067596 259.067596 0 0 0 566.271077 1023.990784a260.60357 260.60357 0 0 0 249.339762-178.889759 258.453206 258.453206 0 0 0 172.848261-123.901893c57.445423-96.868753 44.13365-218.82508-32.050655-302.074865zM566.578272 957.124721c-45.362429 0-89.496079-15.666934-124.516283-44.543243 1.638372-0.921584 4.198329-2.150363 6.143895-3.481541l206.537289-117.757998a32.35785 32.35785 0 0 0 16.895713-29.081105V474.82892l87.243317 49.97035c1.023983 0.307195 1.638372 1.228779 1.638372 2.252762v238.075953c0 105.8798-86.936122 191.689541-193.942303 191.996736zM148.588578 781.102113a189.846373 189.846373 0 0 1-23.346803-128.612213c1.535974 1.023983 4.09593 2.559956 6.143895 3.48154L337.922959 773.729439c10.444622 6.143896 23.346803 6.143896 34.098621 0l252.30931-143.664758v99.531108c0 1.023983-0.307195 1.945567-1.331177 2.559956l-208.892449 118.986778a196.297463 196.297463 0 0 1-265.518686-70.04041zM94.112704 335.97688c22.630015-39.013737 58.367008-68.81163 101.16948-84.171369V494.591784c0 11.7758 6.45109 22.93721 16.793315 28.978707l252.30931 143.767156L377.141493 716.796006a3.174346 3.174346 0 0 1-2.867152 0.307195l-208.892448-118.986777A190.870355 190.870355 0 0 1 94.215102 335.874482z m717.607001 164.861198L559.410394 357.070922 646.653711 307.20297a3.174346 3.174346 0 0 1 2.969549-0.307195l208.892449 118.986777a190.358364 190.358364 0 0 1 70.961994 262.139544 194.556693 194.556693 0 0 1-101.16948 84.171369V529.407192a31.538664 31.538664 0 0 0-16.588518-28.671513z m87.03852-129.329002c-1.74077-1.023983-4.300727-2.559956-6.246294-3.48154l-206.639687-117.757999a34.09862 34.09862 0 0 0-33.996222 0L399.566711 393.934295v-99.531108c0-1.023983 0.307195-1.945567 1.331178-2.559956l208.892449-119.089176a195.990268 195.990268 0 0 1 265.518686 70.450003c22.732414 38.706542 31.129071 84.171369 23.346803 128.305018zM352.258716 548.862861l-87.243317-49.560757a2.457558 2.457558 0 0 1-1.638372-2.252762V258.870991c0-105.8798 87.243317-191.996736 194.556692-191.689541a194.556693 194.556693 0 0 1 124.209089 44.543243c-1.638372 0.921584-4.198329 2.252762-6.143896 3.48154l-206.639687 117.757999a31.948257 31.948257 0 0 0-16.793315 29.081105l-0.307194 286.715126z m47.307995-100.759887L512 384.001664l112.535687 63.998912v127.997824l-112.228492 63.998912-112.535687-63.998912-0.307195-127.997824z" p-id="5623" fill="#707070"></path></svg>
\ No newline at end of file

src/views/ai/chat/index.vue

@@ -109,6 +109,7 @@ const conversationInProgress = ref(false) // 对话进行中
 const conversationInAbortController = ref<any>() // 对话进行中 abort 控制器(控制 stream 对话)
 const conversationInAbortController = ref<any>() // 对话进行中 abort 控制器(控制 stream 对话)
 const inputTimeout = ref<any>() // 处理输入中回车的定时器
 const inputTimeout = ref<any>() // 处理输入中回车的定时器
 const prompt = ref<string>() // prompt
 const prompt = ref<string>() // prompt
+const userInfo = ref<ProfileVO>() // 用户信息
 
 
 const fullText = ref('');
 const fullText = ref('');
 const displayedText = ref('');
 const displayedText = ref('');
@@ -124,6 +125,9 @@ const listLoadingTime = ref<any>() // time定时器，如果加载速度很快
 const messageRef = ref()
 const messageRef = ref()
 const isComposing = ref(false) // 判断用户是否在输入
 const isComposing = ref(false) // 判断用户是否在输入
 
 
+// 默认 role 头像
+const defaultRoleAvatar = 'http://test.yudao.iocoder.cn/eaef5f41acb911dd718429a0702dcc3c61160d16e57ba1d543132fab58934f9f.png'
+
 // =========== 自提滚动效果
 // =========== 自提滚动效果
 
 
 const textRoll = async () => {
 const textRoll = async () => {
@@ -300,6 +304,7 @@ const doSendStream = async (userMessage: ChatMessageVO) => {
       conversationId: activeConversationId.value,
       conversationId: activeConversationId.value,
       type: 'user',
       type: 'user',
       content: userMessage.content,
       content: userMessage.content,
+      userAvatar: userInfo.value?.avatar,
       createTime: new Date()
       createTime: new Date()
     } as ChatMessageVO)
     } as ChatMessageVO)
     list.value.push({
     list.value.push({
@@ -307,6 +312,7 @@ const doSendStream = async (userMessage: ChatMessageVO) => {
       conversationId: activeConversationId.value,
       conversationId: activeConversationId.value,
       type: 'system',
       type: 'system',
       content: '思考中...',
       content: '思考中...',
+      roleAvatar: defaultRoleAvatar,
       createTime: new Date()
       createTime: new Date()
     } as ChatMessageVO)
     } as ChatMessageVO)
     // 滚动到最下面
     // 滚动到最下面
@@ -388,12 +394,11 @@ const getMessageList = async () => {
     // 获取列表数据
     // 获取列表数据
     const messageListRes = await ChatMessageApi.messageList(activeConversationId.value)
     const messageListRes = await ChatMessageApi.messageList(activeConversationId.value)
     // 设置用户头像
     // 设置用户头像
-    const user = await getUserProfile()
     messageListRes.map(item => {
     messageListRes.map(item => {
-      item.userAvatar = user?.avatar
+      // 设置 role 默认头像
+      item.roleAvatar = item.roleAvatar ? item.roleAvatar : defaultRoleAvatar
     })
     })
     list.value = messageListRes
     list.value = messageListRes
-    console.log("设置头像成功", messageListRes)
     // 滚动到最下面
     // 滚动到最下面
     await nextTick(() => {
     await nextTick(() => {
       // 滚动到最后
       // 滚动到最后
@@ -524,6 +529,8 @@ onMounted(async () => {
   // 获取列表数据
   // 获取列表数据
   listLoading.value = true
   listLoading.value = true
   await getMessageList()
   await getMessageList()
+  // 获取用户信息
+  userInfo.value = await getUserProfile()
 })
 })
 </script>
 </script>