feat: 上线ai聊天室

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Managers/AiManager.cs

@@ -1,9 +1,11 @@
 using System.Collections.Generic;
+using System.Net;
 using Microsoft.Extensions.Options;
 using OpenAI;
 using OpenAI.Managers;
 using OpenAI.ObjectModels;
 using OpenAI.ObjectModels.RequestModels;
+using OpenAI.ObjectModels.ResponseModels;
 using Volo.Abp.DependencyInjection;
 using Volo.Abp.Domain.Services;
 using Yi.Framework.ChatHub.Domain.Shared.Dtos;
@@ -24,46 +26,58 @@ namespace Yi.Framework.ChatHub.Domain.Managers
 
         public async IAsyncEnumerable<string> ChatAsStreamAsync(List<AiChatContextDto> aiChatContextDtos)
         {
-            var temp = "站长正在接入ChatGpt,敬请期待~";
+            //var temp = "站长正在接入ChatGpt,敬请期待~";
 
-            for (var i = 0; i < temp.Length; i++)
+            //for (var i = 0; i < temp.Length; i++)
+            //{
+            //    await Task.Delay(200);
+            //    yield return temp[i].ToString();
+            //}
+
+
+
+
+            if (aiChatContextDtos.Count == 0)
             {
-                await Task.Delay(200);
+                yield return null;
-                yield return temp[i].ToString();
             }
 
+            List<ChatMessage> messages = aiChatContextDtos.Select(x =>
+            {
+                if (x.AnswererType == AnswererTypeEnum.Ai)
+                {
+                    return ChatMessage.FromSystem(x.Message);
+                }
+                else
+                {
+                    return ChatMessage.FromUser(x.Message);
+                }
+            }).ToList();
+            var completionResult = OpenAIService.ChatCompletion.CreateCompletionAsStream(new ChatCompletionCreateRequest
+            {
+                Messages = messages,
+                Model = Models.Gpt_4o_mini
+            });
 
-
+            HttpStatusCode? error = null;
-
+            await foreach (var result in completionResult)
-            //if (aiChatContextDtos.Count == 0)
+            {
-            //{
+                if (result.Successful)
-            //    yield return null;
+                {
-            //}
+                    yield return result.Choices.FirstOrDefault()?.Message.Content ?? string.Empty;
-
+                }
-            //List<ChatMessage> messages= aiChatContextDtos.Select(x =>
+                else
-            //{
+                {
-            //    if (x.AnswererType == AnswererTypeEnum.Ai)
+                    error = result.HttpStatusCode;
-            //    {
+                    break;
-            //        return ChatMessage.FromSystem(x.Message);
+                }
-            //    }
+           
-            //    else
+            }
-            //    {
+            if (error == HttpStatusCode.PaymentRequired)
-            //        return ChatMessage.FromUser(x.Message);
+            {
-            //    }
+                yield return "余额不足,请联系站长充值";
-            //}).ToList();
+             
-            //var completionResult = OpenAIService.ChatCompletion.CreateCompletionAsStream(new ChatCompletionCreateRequest
+            }
-            //{
-            //    Messages = messages,
-            //    Model = Models.Gpt_3_5_Turbo
-            //});
-
-            //await foreach (var result in completionResult)
-            //{
-            //    if (result.Successful)
-            //    {
-            //        yield return result.Choices.FirstOrDefault()?.Message.Content ?? string.Empty;
-            //    }
-            //}
 
         }
     }

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

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

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

@@ -60,11 +60,10 @@ const getChatUrl=(url,position)=>
 const currentHeaderName = computed(() => {
   if (selectIsAll()) {
     return "官方学习交流群";
-
   }
   else if
     (selectIsAi()) {
-    return "Ai-ChatGpt(你的私人ai小助手)"
+    return "Ai-ChatGpt4.0(你的私人ai小助手)"
   }
   else {
     currentSelectUser.value.userName;
@@ -233,7 +232,11 @@ const onclickSendGroupMsg = (groupName, msg) => {
     alert("暂未实现");
   }
 }
-
+//清除ai对话
+const clearAiMsg=()=>{
+  sendAiChatContext.value=[];
+  chatStore.clearAiMsg();
+}
 
 //获取当前最后一条信息
 const getLastMessage = ((receiveId, itemType) => {
@@ -264,7 +267,11 @@ const getLastMessage = ((receiveId, itemType) => {
     <p>tip:官方学习交流群每次发送消息消耗 1 钱钱</p>
     <p>tip:点击聊天窗口右上角“X”可退出</p>
     <p>tip:多人同时在聊天室时，左侧可显示其他成员</p>
-    <p>tip:即将接入OpenAi ChatGpt Ai聊天</p>
+
+    <p>Ai聊天：当前Ai为 OpenAi ChatGpt4</p>
+    <p>tip:当前Ai为OpenAi ChatGpt4，由于接口收费原因，还请各位手下留情</p>
+    <p>tip:ai对话为持续对话，如果想清空，可以刷新页面</p>
+    <p>tip:ai对话只有本地存储了记录，刷新后将情况</p>
   </div>
   <div class="body">
     <div class="left">
@@ -353,7 +360,8 @@ const getLastMessage = ((receiveId, itemType) => {
 
     <div class="right">
       <div class="header">
-        <div class="header-left">{{ currentHeaderName }}</div>
+        <div class="header-left">{{ currentHeaderName }}  <span v-show="selectIsAi()" @click="clearAiMsg" >点击清空当前对话</span></div>
+      
         <div class="header-right">
           <div>
             <ul>
@@ -808,6 +816,7 @@ const getLastMessage = ((receiveId, itemType) => {
 .content-others-msg {
   background-color: #FFFFFF;
   padding: 10px 15px;
+  text-align: justify;
 }
 
 .content-others-msg:hover {

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

@@ -3,7 +3,7 @@
     <el-row :gutter="20" class="top-div">
       <el-col :span="17">
       <div class="chat-hub">  
-        <p @click="onClickToChatHub" >点击前往-最新上线<span>《聊天室》 </span>，探索更多可能，结交更多朋友，闭上眼睛，聆听名刀破碎的声音</p>
+        <p @click="onClickToChatHub" >点击前往-最新上线<span>《聊天室》 </span>，现已支持Ai助手，希望能帮助大家</p>
         </div>
         <div class="scrollbar">
           <ScrollbarInfo />
@@ -470,11 +470,13 @@ const onClickAccessLog = async () => {
   span{
    color: red;
   }
+  display: flex;
+    align-content: center;
+    flex-wrap: wrap;
+  height: 30px;
   p {
-    cursor: pointer;
+    margin:0 auto ;
-  display: inline-block;
+    cursor:pointer;
-  padding-left: 100%;
-  animation: marquee 20s linear infinite;
 }
 }