From 8764c6c4712bd51c0df22e0bbb32acb1fd98bfa0 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 24 May 2024 15:39:05 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91AI=EF=BC=9A?=
 =?UTF-8?q?=E6=96=B0=E5=BB=BA=E5=AF=B9=E8=AF=9D=E6=97=B6=EF=BC=8C=E4=B8=8D?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E9=BB=98=E8=AE=A4=E8=A7=92=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ai/chat/conversation/index.ts |  2 +-
 src/views/ai/chat/Message.vue         | 59 ++++++++++++++++++---------
 src/views/ai/chat/index.vue           | 26 +++++++++---
 3 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/src/api/ai/chat/conversation/index.ts b/src/api/ai/chat/conversation/index.ts
index b363ea7b..0834643d 100644
--- a/src/api/ai/chat/conversation/index.ts
+++ b/src/api/ai/chat/conversation/index.ts
@@ -12,8 +12,8 @@ export interface ChatConversationVO {
   temperature: number // 温度参数
   maxTokens: number // 单条回复的最大 Token 数量
   maxContexts: number // 上下文的最大 Message 数量
-  updateTime: number // 更新时间
   // 额外字段
+  systemMessage?: string // 角色设定
   modelName?: string // 模型名字
   roleAvatar?: string // 角色头像
   modelMaxTokens?: string // 模型的单条回复的最大 Token 数量
diff --git a/src/views/ai/chat/Message.vue b/src/views/ai/chat/Message.vue
index 20277562..445182e5 100644
--- a/src/views/ai/chat/Message.vue
+++ b/src/views/ai/chat/Message.vue
@@ -1,8 +1,7 @@
 <template>
-  <div ref="messageContainer" style="height: 100%;overflow-y: auto;position: relative;">
-    <div class="chat-list" v-for="(item, index) in list" :key="index" >
+  <div ref="messageContainer" style="height: 100%; overflow-y: auto; position: relative">
+    <div class="chat-list" v-for="(item, index) in messageList" :key="index">
       <!--  靠左 message  -->
-      <!-- TODO 芋艿：类型判断 -->
       <div class="left-message message-item" v-if="item.type !== 'user'">
         <div class="avatar">
           <el-avatar :src="item.roleAvatar" />
@@ -16,10 +15,10 @@
           </div>
           <div class="left-btns">
             <el-button class="btn-cus" link @click="noCopy(item.content)">
-              <img class="btn-image" src="@/assets/ai/copy.svg"/>
+              <img class="btn-image" src="@/assets/ai/copy.svg" />
             </el-button>
             <el-button class="btn-cus" link @click="onDelete(item.id)">
-              <img class="btn-image" src="@/assets/ai/delete.svg" style="height: 17px; "/>
+              <img class="btn-image" src="@/assets/ai/delete.svg" style="height: 17px" />
             </el-button>
           </div>
         </div>
@@ -38,10 +37,14 @@
           </div>
           <div class="right-btns">
             <el-button class="btn-cus" link @click="noCopy(item.content)">
-              <img class="btn-image" src="@/assets/ai/copy.svg"/>
+              <img class="btn-image" src="@/assets/ai/copy.svg" />
             </el-button>
             <el-button class="btn-cus" link @click="onDelete(item.id)">
-              <img class="btn-image" src="@/assets/ai/delete.svg" style="height: 17px;margin-right: 12px;"/>
+              <img
+                class="btn-image"
+                src="@/assets/ai/delete.svg"
+                style="height: 17px; margin-right: 12px"
+              />
             </el-button>
             <el-button class="btn-cus" link @click="onRefresh(item)">
               <el-icon size="17"><RefreshRight /></el-icon>
@@ -60,30 +63,49 @@
   </div>
 </template>
 <script setup lang="ts">
-import {formatDate} from "@/utils/formatTime";
-import MarkdownView from "@/components/MarkdownView/index.vue";
-import {ChatMessageApi, ChatMessageVO} from "@/api/ai/chat/message";
-import {useClipboard} from "@vueuse/core";
-import {PropType} from "vue";
-import {ArrowDownBold, Edit, RefreshRight} from "@element-plus/icons-vue";
+import { formatDate } from '@/utils/formatTime'
+import MarkdownView from '@/components/MarkdownView/index.vue'
+import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
+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'
 
-const {copy} = useClipboard() // 初始化 copy 到粘贴板
+const { copy } = useClipboard() // 初始化 copy 到粘贴板
 // 判断 消息列表 滚动的位置(用于判断是否需要滚动到消息最下方)
 const messageContainer: any = ref(null)
 const isScrolling = ref(false) //用于判断用户是否在滚动
 
 // 定义 props
 const props = defineProps({
+  conversation: {
+    type: Object as PropType<ChatConversationVO>,
+    required: true
+  },
   list: {
     type: Array as PropType<ChatMessageVO[]>,
     required: true
   }
 })
 
+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) =>{
-   await nextTick(() => {
+const scrollToBottom = async (isIgnore?: boolean) => {
+  await nextTick(() => {
     //注意要使用nexttick以免获取不到dom
     if (isIgnore || !isScrolling.value) {
       messageContainer.value.scrollTop =
@@ -97,7 +119,7 @@ function handleScroll() {
   const scrollTop = scrollContainer.scrollTop
   const scrollHeight = scrollContainer.scrollHeight
   const offsetHeight = scrollContainer.offsetHeight
-  if ((scrollTop + offsetHeight) < (scrollHeight - 100)) {
+  if (scrollTop + offsetHeight < scrollHeight - 100) {
     // 用户开始滚动并在最底部之上，取消保持在最底部的效果
     isScrolling.value = true
   } else {
@@ -168,7 +190,7 @@ watch(list, async (newValue, oldValue) => {
 })
 
 // 提供方法给 parent 调用
-defineExpose({scrollToBottom, handlerGoTop})
+defineExpose({ scrollToBottom, handlerGoTop })
 
 // 定义 emits
 const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit'])
@@ -191,7 +213,6 @@ onMounted(async () => {
   overflow-y: scroll;
   //padding: 0 15px;
   //z-index: -1;
-
 }
 
 // 中间
diff --git a/src/views/ai/chat/index.vue b/src/views/ai/chat/index.vue
index d9a44df1..3298737c 100644
--- a/src/views/ai/chat/index.vue
+++ b/src/views/ai/chat/index.vue
@@ -36,10 +36,11 @@
           <div class="message-container" >
             <MessageLoading v-if="listLoading" />
             <MessageNewChat v-if="!activeConversation" @on-new-chat="handlerNewChat" />
-            <ChatEmpty v-if="!listLoading && list.length === 0 && activeConversation" @on-prompt="doSend"/>
-            <Message v-if="!listLoading && list.length > 0"
+            <ChatEmpty v-if="!listLoading && messageList.length === 0 && activeConversation" @on-prompt="doSend"/>
+            <Message v-if="!listLoading && messageList.length > 0"
                      ref="messageRef"
-                     :list="list"
+                     :conversation="activeConversation"
+                     :list="messageList"
                      @on-delete-success="handlerMessageDelete"
                      @on-edit="handlerMessageEdit"
                      @on-refresh="handlerMessageRefresh"/>
@@ -103,13 +104,11 @@ 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 {useClipboard} from '@vueuse/core'
 import ChatConversationUpdateForm from "@/views/ai/chat/components/ChatConversationUpdateForm.vue";
 import {Download, Top} from "@element-plus/icons-vue";
 
 const route = useRoute() // 路由
 const message = useMessage() // 消息弹窗
-const {copy} = useClipboard() // 初始化 copy 到粘贴板
 
 // ref 属性定义
 const activeConversationId = ref<string | null>(null) // 选中的对话编号
@@ -391,6 +390,23 @@ const stopStream = async () => {
 
 // ============== message 数据 =================
 
+/** 消息列表 */
+const messageList = computed(() => {
+  if (list.value.length > 0) {
+    return list.value
+  }
+  // 没有消息时，如果有 systemMessage 则展示它
+  // TODO add by 芋艿：这个消息下面，不能有复制、删除按钮
+  if (activeConversation.value?.systemMessage) {
+    return [{
+      id: 0,
+      type: 'system',
+      content: activeConversation.value.systemMessage
+    }]
+  }
+  return []
+})
+
 /**
  * 获取 - message 列表
  */