feat:聊天新增ai

Yi.Bbs.Vue3/src/apis/chatMessageApi.js

@@ -21,4 +21,12 @@ export function sendGroupMessage(data) {
       method: "get"
     });
   }
+
+  export function sendAiChat(data) {
+    return request({
+      url: "/ai-chat/chat",
+      method: "post",
+      data
+    });
+  }
   

Yi.Bbs.Vue3/src/components/ArticleContentInfo.vue

@@ -117,7 +117,7 @@ const codeHandler = (code, language) => {
             // 将代码包裹在 textarea 中，由于防止textarea渲染出现问题，这里将 "<" 用 "&lt;" 代替，不影响复制功能
             let html = `<pre  class='hljs pre'><div class="header"><span class="language">${language}</span><span class="copy" id="${codeIndex}">复制代码</span></div><div class="code-con"><div class="nav">${navCode}</div><code class="code">${preCode}</code></div></pre>`;
             codeCopyDic.push({id: codeIndex,code:code});
-            console.log(codeCopyDic.length);
+            // console.log(codeCopyDic.length);
             return html;
             //<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${code.replace(/<\/textarea>/g, "&lt;/textarea>")}</textarea>
         } catch (error) {

Yi.Bbs.Vue3/src/components/MavonEdit.vue

@@ -118,14 +118,14 @@ const imgAdd = async (pos, $file) => {
   formdata.append('file', $file);
   const response = await upload(formdata)
   const url = `${import.meta.env.VITE_APP_BASEAPI}/file/${response.data[0].id}/true`;
-  console.log(url)
+  //console.log(url)
   md.value.$img2Url(pos, url);
 
 }
 
 //选择表情包
 const onSelectEmoji=(emoji)=>{
-  console.log(emoji.i,"emoji");
+  //console.log(emoji.i,"emoji");
   text.value+=emoji.i
 }
 

Yi.Bbs.Vue3/src/hubs/chatHub.js

@@ -13,17 +13,27 @@ const receiveMsg = (connection) => {
     });
     //接受其他用户消息
     connection.on("receiveMsg", (type, content) => {
-        chatStore.addMsg(content);
+        const letChatStore = useChatStore();
+        //如果是ai消息，还要进行流式显示
+       // alert(type)
+        if (type == 3) {
+            letChatStore.addOrUpdateMsg(content);
+        }
+        else {
+            letChatStore.addMsg(content);
+        }
+
+
     });
     //用户状态-正在输入中，无
     connection.on("userStatus", (type) => {
 
     });
 };
-export  function start(){
+export function start() {
     signalR.start(`chat`, receiveMsg);
 }
-export function close(){
+export function close() {
     signalR.SR.stop();
 }
 

Yi.Bbs.Vue3/src/layout/AppHeader.vue

@@ -155,7 +155,7 @@ const fetchNoticeData = async () => {
 
 
 const handleSelect = (key, keyPath) => {
-  console.log(key, keyPath);
+  //console.log(key, keyPath);
 };
 const logout = async () => {
   ElMessageBox.confirm(`确定登出系统吗?`, "警告", {

Yi.Bbs.Vue3/src/stores/chat.js

@@ -7,9 +7,23 @@ const chatStore = defineStore("chat", {
     getters: {
       allMsgContext: (state) => state.msgList.filter(x=>x.messageType=="All"),
       personalMsgContext: (state) => state.msgList.filter(x=>x.messageType=="Personal"),
+      aiMsgContext: (state) => state.msgList.filter(x=>x.messageType=="Ai")
     },
   actions:
   {
+    addOrUpdateMsg(msg){
+     var currentMsg= this.msgList.filter(x => x.id == msg.id)[0];
+     //当前没有包含,如果有相同的上下文id，只需要改变content即可
+    if(currentMsg==undefined)
+    {
+      this.addMsg(msg);
+    }
+    else
+    {
+      currentMsg.content+=msg.content;
+    }
+
+    },
     setMsgList(value) {
       this.msgList = value;
     },

Yi.Bbs.Vue3/src/utils/icon.js

@@ -2,10 +2,14 @@ export const getUrl = (fileId) => {
     if (fileId == null || fileId == undefined) {
         return "/acquiesce.png"
     }
-    else {
-        return getEnvUrl(fileId)
+    if (fileId.startsWith(`${import.meta.env.VITE_APP_BASEAPI}`)) {
+        return fileId;
+
     }
 
+
+    return getEnvUrl(fileId)
+
 };
 
 const getEnvUrl = (str) => {

Yi.Bbs.Vue3/src/views/chathub/Index.vue

@@ -3,7 +3,7 @@ import { onMounted, ref, computed, onUnmounted } from 'vue';
 import { storeToRefs } from 'pinia'
 import useAuths from '@/hooks/useAuths.js';
 import { getList as getChatUserList } from '@/apis/chatUserApi'
-import { sendPersonalMessage, sendGroupMessage, getAccountList as getChatAccountMessageList } from '@/apis/chatMessageApi'
+import { sendPersonalMessage, sendGroupMessage, getAccountList as getChatAccountMessageList, sendAiChat } from '@/apis/chatMessageApi'
 import useChatStore from "@/stores/chat";
 import useUserStore from "@/stores/user";
 const { isLogin } = useAuths();
@@ -19,17 +19,22 @@ const userStore = useUserStore();
 //发送消息是否为空
 const msgIsNullShow = ref(false)
 //当前选择用户
-const currentSelectUser = ref(null);
+const currentSelectUser = ref('all');
 //当前输入框的值
 const currentInputValue = ref("");
 //临时存储的输入框，根据用户id及组name、all组为key，data为value
-const inputListDataStore = ref([{ key: "all", value: "" }]);
+const inputListDataStore = ref([{ key: "all", value: "" }, { key: "ai", value: "" }]);
+//AI聊天临时存储
+const sendAiChatContext = ref([]);
 
 //当前聊天框显示的消息
 const currentMsgContext = computed(() => {
   if (selectIsAll()) {
     return chatStore.allMsgContext;
   }
+  else if (selectIsAi) {
+    return chatStore.aiMsgContext;
+  }
   else {
     return chatStore.personalMsgContext.filter(x => {
       //两个条件
@@ -40,11 +45,31 @@ const currentMsgContext = computed(() => {
     });
   }
 });
+const getChatUrl=(url,position)=>
+{
+  if(position=="left" && selectIsAi())
+  {
+  return "/openAi.png"
+  }
 
+  return getUrl(url);
+
+}
 
 //当前聊天框显示的名称
 const currentHeaderName = computed(() => {
-  return currentSelectUser.value == null ? "官方学习交流群" : currentSelectUser.value.userName;
+  if (selectIsAll()) {
+    return "官方学习交流群";
+
+  }
+  else if
+    (selectIsAi()) {
+    return "Ai-ChatGpt(你的私人ai小助手)"
+  }
+  else {
+    currentSelectUser.value.userName;
+  }
+
 });
 const currentUserItem = computed(() => {
   return userList.value.filter(x => x.userId != useUserStore().id)
@@ -76,8 +101,13 @@ onUnmounted(() => {
 /*-----方法-----*/
 //当前选择的是否为全部
 const selectIsAll = () => {
-  return currentSelectUser.value == null;
+  return currentSelectUser.value == 'all';
 };
+//当前选择的是否为Ai
+const selectIsAi = () => {
+  return currentSelectUser.value == 'ai';
+};
+
 
 //输入框的值被更改
 const changeInputValue = (inputValue) => {
@@ -85,7 +115,10 @@ const changeInputValue = (inputValue) => {
   let index = -1;
   let findKey = currentSelectUser.value?.userId
   if (selectIsAll()) {
-    findKey = 'all'
+    findKey = 'all';
+  }
+  else if (selectIsAi()) {
+    findKey = 'ai';
   }
   index = inputListDataStore.value.findIndex(obj => obj.key == findKey);
   inputListDataStore.value[index].value = currentInputValue.value;
@@ -99,7 +132,12 @@ const getCurrentInputValue = () => {
 
   if (selectIsAll()) {
     return inputListDataStore.value.filter(x => x.key == "all")[0].value;
-  } else {
+  }
+  else if (selectIsAi()) {
+    return inputListDataStore.value.filter(x => x.key == "ai")[0].value;
+  }
+
+  else {
     //如果不存在初始存储值
     if (!inputListDataStore.value.some(x => x.key == currentSelectUser.value.userId)) {
       inputListDataStore.value.push({ key: currentSelectUser.value.userId, value: "" });
@@ -110,9 +148,12 @@ const getCurrentInputValue = () => {
 };
 
 //点击用户列表,
-const onclickUserItem = (userInfo, isAllItem) => {
-  if (isAllItem) {
-    currentSelectUser.value = null;
+const onclickUserItem = (userInfo, itemType) => {
+  if (itemType == "all") {
+    currentSelectUser.value = 'all';
+  }
+  else if (itemType == "ai") {
+    currentSelectUser.value = 'ai';
   }
   else {
     currentSelectUser.value = userInfo;
@@ -136,6 +177,17 @@ const onclickSendMsg = () => {
 
   if (selectIsAll()) {
     onclickSendGroupMsg("all", currentInputValue.value);
+  }
+  else if (selectIsAi()) {
+    //ai消息需要将上下文存储
+    sendAiChatContext.value.push({ answererType: 'User', message: currentInputValue.value, number: sendAiChatContext.value.length })
+   
+    //离线前端存储
+    chatStore.addMsg({messageType:"Ai",content:currentInputValue.value,sendUserId:userStore.id,sendUserInfo:{user:{icon:userStore.icon}}})
+    //发送ai消息
+    sendAiChat(sendAiChatContext.value);
+
+    
   }
   else {
     onclickSendPersonalMsg(currentSelectUser.value.userId, currentInputValue.value);
@@ -184,10 +236,15 @@ const onclickSendGroupMsg = (groupName, msg) => {
 
 
 //获取当前最后一条信息
-const getLastMessage = ((receiveId, isAll) => {
-  if (isAll) {
-    return chatStore.allMsgContext[chatStore.allMsgContext.length - 1]?.content;
-  } else {
+const getLastMessage = ((receiveId, itemType) => {
+  if (itemType == "all") {
+    return chatStore.allMsgContext[chatStore.allMsgContext.length - 1]?.content.substring(0, 15);
+  }
+  else if (itemType == "ai") {
+    return chatStore.aiMsgContext[chatStore.aiMsgContext.length - 1]?.content.substring(0, 15);
+  }
+
+  else {
     const messageContext = chatStore.personalMsgContext.filter(x => {
       //两个条件
       //接收用户者id为对面id（我发给他）
@@ -195,7 +252,7 @@ const getLastMessage = ((receiveId, isAll) => {
       return (x.receiveId == receiveId && x.sendUserId == userStore.id) ||
         (x.sendUserId == receiveId && x.receiveId == userStore.id);
     });
-    return messageContext[messageContext.length - 1]?.content;
+    return messageContext[messageContext.length - 1]?.content.substring(0, 15);
   }
 
 })
@@ -203,16 +260,17 @@ const getLastMessage = ((receiveId, isAll) => {
 
 <template>
   <div style="position: absolute; top: 0;left: 0;">
-    <p>当前版本：1.2.0</p>
+    <p>当前版本：1.3.0</p>
     <p>tip:官方学习交流群每次发送消息消耗 1 钱钱</p>
     <p>tip:点击聊天窗口右上角“X”可退出</p>
     <p>tip:多人同时在聊天室时，左侧可显示其他成员</p>
+    <p>tip:即将接入OpenAi ChatGpt Ai聊天</p>
   </div>
   <div class="body">
-
     <div class="left">
       <div class="icon">
-        <img src="@/assets/chat_images/icon.jpg">
+   
+        <img :src="userStore.icon">
       </div>
       <ul class="top-icon">
         <li><img src="@/assets/chat_images/wechat.png" /></li>
@@ -243,13 +301,28 @@ const getLastMessage = ((receiveId, isAll) => {
         </div>
       </div>
       <div class="user-list">
-        <div class="user-div" @click="onclickUserItem(null, true)"
-          :class="{ 'select-user-item': currentSelectUser == null }">
+        <div class="user-div" @click="onclickUserItem(null, 'all')"
+          :class="{ 'select-user-item': currentSelectUser == 'all' }">
           <div class="user-div-left">
             <img src="@/assets/chat_images/yilogo.png" />
             <div class="user-name-msg">
               <p class="font-name">官方学习交流群</p>
-              <p class="font-msg">{{ getLastMessage(null, true) }}</p>
+              <p class="font-msg">{{ getLastMessage(null, 'all') }}</p>
+            </div>
+          </div>
+          <div class=" user-div-right">
+            10:28
+          </div>
+
+        </div>
+
+        <div class="user-div" @click="onclickUserItem(null, 'ai')"
+          :class="{ 'select-user-item': currentSelectUser == 'ai' }">
+          <div class="user-div-left">
+            <img src="/openAi.png" />
+            <div class="user-name-msg">
+              <p class="font-name">Ai-ChatGpt</p>
+              <p class="font-msg">{{ getLastMessage(null, 'ai') }}</p>
             </div>
           </div>
           <div class=" user-div-right">
@@ -259,14 +332,16 @@ const getLastMessage = ((receiveId, isAll) => {
         </div>
 
 
-        <div v-for="(item, i) in currentUserItem" :key="i" @click="onclickUserItem(item, false)" class="user-div"
+
+
+        <div v-for="(item, i) in currentUserItem" :key="i" @click="onclickUserItem(item, 'user')" class="user-div"
           :class="{ 'select-user-item': currentSelectUser?.userId == item.userId }">
           <div class="user-div-left">
 
-            <img :src="getUrl(item.userIcon)"  />
+            <img :src="getChatUrl(item.userIcon)" />
             <div class="user-name-msg">
               <p class="font-name">{{ item.userName }}</p>
-              <p class="font-msg">{{ getLastMessage(item.userId, false) }}</p>
+              <p class="font-msg">{{ getLastMessage(item.userId, 'user') }}</p>
             </div>
           </div>
           <div class=" user-div-right">
@@ -296,18 +371,23 @@ const getLastMessage = ((receiveId, isAll) => {
       </div>
       <div class="content">
         <div v-for="(item, i) in currentMsgContext" :key="i">
+         
+
+          <!-- 对话框右侧 -->
           <div class="content-myself content-common" v-if="item.sendUserId == userStore.id">
             <div class="content-myself-msg content-msg-common ">{{ item.content }}</div>
-            <img :src="getUrl(item.sendUserInfo?.user.icon)" />
+
+            <img :src="getChatUrl(item.sendUserInfo?.user.icon,'right')" />
           </div>
 
+          <!-- 对话框左侧 -->
           <div class="content-others content-common" v-else>
-
-            <img :src="getUrl(item.sendUserInfo?.user.icon)" />
+            <img :src="getChatUrl(item.sendUserInfo?.user.icon,'left')" />
             <div>
-    
-              <p  v-if="selectIsAll()" class="content-others-username">{{item.sendUserInfo?.user.userName}}</p>
-              <div class="content-others-msg content-msg-common " :class="{'content-others-msg-group':selectIsAll()}">
+
+              <p v-if="selectIsAll()" class="content-others-username">{{ item.sendUserInfo?.user.userName }}</p>
+              <div class="content-others-msg content-msg-common "
+                :class="{ 'content-others-msg-group': selectIsAll() }">
                 {{ item.content }}
               </div>
             </div>
@@ -712,16 +792,19 @@ const getLastMessage = ((receiveId, isAll) => {
   justify-content: flex-start;
 
 }
-.content-others-username{
-    margin-left: 15px;
-    color: #B2B2B2;
-    position: relative;
-    top: -15px;
-  }
-.content-others-msg-group{
+
+.content-others-username {
+  margin-left: 15px;
+  color: #B2B2B2;
   position: relative;
-    top: -10px;
+  top: -15px;
 }
+
+.content-others-msg-group {
+  position: relative;
+  top: -10px;
+}
+
 .content-others-msg {
   background-color: #FFFFFF;
   padding: 10px 15px;

Yi.Bbs.Vue3/src/views/lucky/Index.vue

@@ -83,7 +83,6 @@ const startCallback = () => {
       try
       {
         const ddd=(await luckyWheel()).data;
-        console.log(ddd,"dd");
       index= (await luckyWheel()).data;
       }
       catch

Yi.Bbs.Vue3/src/views/profile/UserAvatar.vue

@@ -247,7 +247,7 @@ watch(
   () => props,
    (val,oldValue) => {
     const userIcon=props.user.icon;
-    console.log(userIcon,"userIcon")
+    //console.log(userIcon,"userIcon")
     options.img=userIcon == "" || userIcon == null
                 ? "/acquiesce.png"
                 : import.meta.env.VITE_APP_BASEAPI + "/file/" + userIcon;

Yi.Bbs.Vue3/src/views/start/Index.vue

@@ -61,7 +61,7 @@ onMounted(async() => {
     const {data}= await GetResult();
     nugetData.downloadNumber=data.downloadNumber;
     nugetData.versions=data.versions[0];
-    console.log(data,"data");
+    //console.log(data,"data");
     // 监听页面滚动事件
     window.addEventListener("scroll", scrolling, true);