feat: 支持多ai聊天

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/AiChatService.cs

@@ -23,14 +23,13 @@ namespace Yi.Framework.ChatHub.Application.Services
         /// <param name="chatContext"></param>
         /// <returns></returns>
         [Authorize]
-        [HttpPost]
+        [HttpPost("ai-chat/chat/{model}")]
-
+        public async Task ChatAsync([FromRoute]string model, [FromBody] List<AiChatContextDto> chatContext)
-        public async Task ChatAsync([FromBody] List<AiChatContextDto> chatContext)
         {
             const int maxChar = 10;
             var contextId = Guid.NewGuid();
             Queue<string> stringQueue = new Queue<string>();
-            await foreach (var aiResult in _aiManager.ChatAsStreamAsync(chatContext))
+            await foreach (var aiResult in _aiManager.ChatAsStreamAsync(model,chatContext))
             {
                 stringQueue.Enqueue(aiResult);
 
@@ -53,8 +52,6 @@ namespace Yi.Framework.ChatHub.Application.Services
                 currentEndStr.Append(str);
             }
             await _userMessageManager.SendMessageAsync(MessageContext.CreateAi(currentEndStr.ToString(), CurrentUser.Id!.Value, contextId));
-
-            //await _userMessageManager.SendMessageAsync(MessageContext.CreateAi(null, CurrentUser.Id!.Value, contextId));
         }
     }
 }

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

@@ -24,19 +24,8 @@ namespace Yi.Framework.ChatHub.Domain.Managers
         }
         private OpenAIService OpenAIService { get; }
 
-        public async IAsyncEnumerable<string> ChatAsStreamAsync(List<AiChatContextDto> aiChatContextDtos)
+        public async IAsyncEnumerable<string> ChatAsStreamAsync(string model, List<AiChatContextDto> aiChatContextDtos)
         {
-            //var temp = "站长正在接入ChatGpt,敬请期待~";
-
-            //for (var i = 0; i < temp.Length; i++)
-            //{
-            //    await Task.Delay(200);
-            //    yield return temp[i].ToString();
-            //}
-
-
-
-
             if (aiChatContextDtos.Count == 0)
             {
                 yield return null;
@@ -56,7 +45,7 @@ namespace Yi.Framework.ChatHub.Domain.Managers
             var completionResult = OpenAIService.ChatCompletion.CreateCompletionAsStream(new ChatCompletionCreateRequest
             {
                 Messages = messages,
-                Model = Models.Gpt_4o_mini
+                Model =model 
             });
 
             HttpStatusCode? error = null;

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

@@ -1,26 +1,32 @@
 <script setup>
-import { nextTick,onMounted, ref, computed, onUnmounted } from 'vue';
+import {nextTick, onMounted, ref, computed, onUnmounted} from 'vue';
-import { storeToRefs } from 'pinia'
+import {storeToRefs} from 'pinia'
 import useAuths from '@/hooks/useAuths.js';
-import { getList as getChatUserList } from '@/apis/chatUserApi'
+import {getList as getChatUserList} from '@/apis/chatUserApi'
-import { sendPersonalMessage, sendGroupMessage, getAccountList as getChatAccountMessageList, sendAiChat } 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();
+
-import { useRouter } from 'vue-router'
+const {isLogin} = useAuths();
-import { getUrl } from '@/utils/icon'
+import {useRouter} from 'vue-router'
+import {getUrl} from '@/utils/icon'
 
 //markdown ai显示
-import { marked } from 'marked';
+import {marked} from 'marked';
 import '@/assets/atom-one-dark.css';
 import '@/assets/github-markdown.css';
 import hljs from "highlight.js";
 
-const isShowTipNumber=ref(10);
+const isShowTipNumber = ref(10);
 const router = useRouter();
 //聊天存储
 const chatStore = useChatStore();
-const { userList } = storeToRefs(chatStore);
+const {userList} = storeToRefs(chatStore);
 
 //用户信息
 const userStore = useUserStore();
@@ -31,153 +37,18 @@ const currentSelectUser = ref('all');
 //当前输入框的值
 const currentInputValue = ref("");
 //临时存储的输入框，根据用户id及组name、all组为key，data为value
-const inputListDataStore = ref([{ key: "all", value: "" }, { key: "ai", value: "" }]);
+const inputListDataStore = ref([
+    {key: "all", name:"官方学习交流群",titleName:"官方学习交流群",logo:"yilogo.png",  value: ""},
+    {key: "ai@deepseek-chat",name:"DeepSeek聊天", titleName:"DeepSeek-聊天模式",logo:"deepSeekAi.png",value: ""},
+    {key: "ai@deepseek-reasoner",name:"DeepSeek思索",titleName:"DeepSeek-思索模式",logo:"deepSeekAi.png", value: ""},
+    {key: "ai@gpt-4o-mini",name:"ChatGpt聊天",titleName:"ChatGpt-聊天模式",logo:"openAi.png", value: ""},
+]);
 //AI聊天临时存储
 const sendAiChatContext = ref([]);
-
-let timerTip=null;
-//倒计时显示tip
-const startCountTip = () => {
-      timerTip = setInterval(() => {
-        if (isShowTipNumber.value > 0) {
-          isShowTipNumber.value--;
-        } else {
-          clearInterval(timerTip); // 倒计时结束
-        }
-      }, 1000);
-    };
-let codeCopyDic=[];
-//当前聊天框显示的消息
-const currentMsgContext = computed(() => {
-
-  if (selectIsAll()) {
-    return chatStore.allMsgContext;
-  }
-  else if (selectIsAi()) {
-    //如果是ai的值，还行经过markdown处理
-  //  console.log(chatStore.aiMsgContext, "chatStore.aiMsgContext");
-    // return chatStore.aiMsgContext;
-    let tempHtml = [];
-    codeCopyDic=[];
-    chatStore.aiMsgContext.forEach(element => {
-     
-      tempHtml.push({ content: toMarkDownHtml(element.content), messageType: 'Ai', sendUserId: element.sendUserId, sendUserInfo: element.sendUserInfo });
-    });
-
-    return tempHtml;
-  }
-  else {
-    return chatStore.personalMsgContext.filter(x => {
-      //两个条件
-      //接收用户者id为对面id（我发给他）
-      //或者，发送用户id为对面（他发给我）
-      return (x.receiveId == currentSelectUser.value.userId && x.sendUserId == userStore.id) ||
-        (x.sendUserId == currentSelectUser.value.userId && x.receiveId == userStore.id);
-    });
-  }
-});
-
-//转换markdown
-const toMarkDownHtml = (text) => {
-  marked.setOptions({
-    renderer: new marked.Renderer(),
-    highlight: function (code, language) {
-       return codeHandler(code, language);
-      //return hljs.highlightAuto(code).value;
-    },
-    pedantic: false,
-    gfm: true,//允许 Git Hub标准的markdown
-    tables: true,//支持表格
-    breaks: true,
-    sanitize: false,
-    smartypants: false,
-    xhtml: false,
-    smartLists: true,
-  }
-  );
-  //需要注意代码块样式
-  const soureHtml = marked(text);
-  nextTick(()=>{
-            addCopyEvent();
-        }) 
-  return soureHtml;
-}
-
-
-//code部分处理、高亮
-const codeHandler = (code, language) => {
-  const codeIndex = parseInt(Date.now() + "") + Math.floor(Math.random() * 10000000);
-  //console.log(codeIndex,"codeIndex");
-  // 格式化第一行是右侧language和 “复制” 按钮；
-  if (code) {
-    const navCode = navHandler(code)
-    try {
-      // 使用 highlight.js 对代码进行高亮显示
-      const preCode = hljs.highlightAuto(code).value;
-      // 将代码包裹在 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);
-      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) {
-      console.log(error);
-    }
-  }
-
-}
-
-//左侧导航栏处理
-const navHandler = (code) => {
-    //获取行数
-    var linesCount = getLinesCount(code);
-
-    var currentLine = 1;
-    var liHtml = ``;
-    while (linesCount + 1 >= currentLine) {
-        liHtml += `<li class="nav-li">${currentLine}</li>`
-        currentLine++
-    }
-
-    let html = `<ul class="nav-ul">${liHtml}</ul>`
-
-
-    return html;
-}
-const BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
-const getLinesCount = (text) => {
-    return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
-}
-
-const getChatUrl = (url, position) => {
-  if (position == "left" && selectIsAi()) {
-    return "/openAi.png"
-  }
-
-  return getUrl(url);
-
-}
-
-//当前聊天框显示的名称
-const currentHeaderName = computed(() => {
-  if (selectIsAll()) {
-    return "官方学习交流群";
-  }
-  else if
-    (selectIsAi()) {
-    return "Ai-ChatGpt4.0(你的私人ai小助手)"
-  }
-  else {
-
-  return  currentSelectUser.value.userName;
-  }
-
-});
-const currentUserItem = computed(() => {
-  return userList.value.filter(x => x.userId != useUserStore().id)
-});
 var timer = null;
 
+let codeCopyDic = [];
+
 //初始化
 onMounted(async () => {
   if (!isLogin.value) {
@@ -188,8 +59,6 @@ onMounted(async () => {
     timer = setTimeout(function () {
       onclickClose();
     }, 3000);
-
-
   }
   chatStore.setMsgList((await getChatAccountMessageList()).data);
   chatStore.setUserList((await getChatUserList()).data);
@@ -202,90 +71,113 @@ onUnmounted(() => {
   if (timerTip != null) {
     clearInterval(timerTip)
   }
-  
 })
 
-const clickCopyEvent=async function(event) {
+/*-----计算属性-----*/
-  const spanId=event.target.id;
+//当前聊天框内容显示的消息
-  console.log(codeCopyDic,"codeCopyDic")
+const currentMsgContext = computed(() => {
-  console.log(spanId,"spanId")
+  //选择全部人
-   await navigator.clipboard.writeText(codeCopyDic.filter(x=>x.id==spanId)[0].code);
+  if (selectIsAll()) {
-  ElMessage({
+    return chatStore.allMsgContext;
-    message: "代码块复制成功",
+  }
-    type: "success",
+  //选择ai
-    duration: 2000,
+  else if (selectIsAi()) {
-  });
+    //如果是ai的值，还行经过markdown处理
-}
+    // console.log(chatStore.aiMsgContext, "chatStore.aiMsgContext");
-//代码copy事件
+    // return chatStore.aiMsgContext;
-const addCopyEvent=()=>{
+    let tempHtml = [];
-    const copySpans = document.querySelectorAll('.copy');
+    codeCopyDic = [];
-// 为每个 copy span 元素添加点击事件
+    chatStore.aiMsgContext.forEach(element => {
-copySpans.forEach(span => {
+      tempHtml.push({
-  //先移除，再新增
+        content: toMarkDownHtml(element.content),
-  span.removeEventListener('click',clickCopyEvent );
+        messageType: 'Ai',
-  span.addEventListener('click', clickCopyEvent);
+        sendUserId: element.sendUserId,
-});
+        sendUserInfo: element.sendUserInfo
-}
+      });
+    });
 
+    return tempHtml;
+  }
+  //选择个人
+  else {
+    return chatStore.personalMsgContext.filter(x => {
+      //两个条件
+      //接收用户者id为对面id（我发给他）
+      //或者，发送用户id为对面（他发给我）
+      return (x.receiveId === currentSelectUser.value.userId && x.sendUserId === userStore.id) ||
+          (x.sendUserId === currentSelectUser.value.userId && x.receiveId === userStore.id);
+    });
+  }
+});
+//图片
+const getChatUrl = (url, position) => {
+  if (position === "left" && selectIsAi()) {
+    return "/openAi.png"
+  }
+  return getUrl(url);
+}
+//当前聊天框显示的名称
+const currentHeaderName = computed(() => {
+  if (selectIsAll()) {
+    return "官方学习交流群";
+  } else if (selectIsAi()) {
+    return "Ai-ChatGpt4.0(你的私人ai小助手)"
+  } else {
+    return currentSelectUser.value.userName;
+  }
+});
+//当前在线的用户项
+const currentUserItem = computed(() => {
+  return userList.value.filter(x => x.userId !== useUserStore().id)
+});
 
 /*-----方法-----*/
 //当前选择的是否为全部
 const selectIsAll = () => {
-  return currentSelectUser.value == 'all';
+  return currentSelectUser.value === 'all';
 };
 //当前选择的是否为Ai
 const selectIsAi = () => {
-  return currentSelectUser.value == 'ai';
+  return currentSelectUser.value === 'ai';
 };
 
-
+//输入框的值被更改（同时保存到store中）
-//输入框的值被更改
 const changeInputValue = (inputValue) => {
   currentInputValue.value = inputValue;
   let index = -1;
   let findKey = currentSelectUser.value?.userId
   if (selectIsAll()) {
     findKey = 'all';
-  }
+  } else if (selectIsAi()) {
-  else if (selectIsAi()) {
     findKey = 'ai';
   }
-  index = inputListDataStore.value.findIndex(obj => obj.key == findKey);
+  index = inputListDataStore.value.findIndex(obj => obj.key === findKey);
   inputListDataStore.value[index].value = currentInputValue.value;
 }
-//绑定的input改变事件
+
-const updateInputValue = (event) => {
+//获取输入框的值（切换左侧菜单的时候，给输入框补充之前没发送的值）
-  changeInputValue(event.target.value);
-}
-//获取输入框的值
 const getCurrentInputValue = () => {
-
   if (selectIsAll()) {
-    return inputListDataStore.value.filter(x => x.key == "all")[0].value;
+    return inputListDataStore.value.filter(x => x.key === "all")[0].value;
-  }
+  } else if (selectIsAi()) {
-  else if (selectIsAi()) {
+    return inputListDataStore.value.filter(x => x.key === "ai")[0].value;
-    return inputListDataStore.value.filter(x => x.key == "ai")[0].value;
+  } else {
-  }
-
-  else {
     //如果不存在初始存储值
-    if (!inputListDataStore.value.some(x => x.key == currentSelectUser.value.userId)) {
+    if (!inputListDataStore.value.some(x => x.key === currentSelectUser.value.userId)) {
-      inputListDataStore.value.push({ key: currentSelectUser.value.userId, value: "" });
+      inputListDataStore.value.push({key: currentSelectUser.value.userId, value: ""});
       return "";
     }
-    return inputListDataStore.value.filter(x => x.key == currentSelectUser.value.userId)[0].value;
+    return inputListDataStore.value.filter(x => x.key === currentSelectUser.value.userId)[0].value;
   }
 };
 
 //点击用户列表,
 const onclickUserItem = (userInfo, itemType) => {
-  if (itemType == "all") {
+  if (itemType === "all") {
     currentSelectUser.value = 'all';
-  }
+  } else if (itemType === "ai") {
-  else if (itemType == "ai") {
     currentSelectUser.value = 'ai';
-  }
+  } else {
-  else {
     currentSelectUser.value = userInfo;
   }
   //填充临时存储的输入框
@@ -294,26 +186,9 @@ const onclickUserItem = (userInfo, itemType) => {
   changeInputValue(value);
 }
 
-//输入框按键事件
-const handleKeydownInput=()=>{
- // 检查是否按下 Shift + Enter
- if (event.key === 'Enter' && event.shiftKey) {
-        // 允许输入换行
-        return; // 让默认行为继续
-      }
-
-      // 如果只按下 Enter，则阻止默认的提交行为，比如在表单中
-      if (event.key === 'Enter') {
-        // 阻止默认行为
-        event.preventDefault();
-        onclickSendMsg();
-        return;
-      }
-}
-
 //点击发送按钮
 const onclickSendMsg = () => {
-  if (currentInputValue.value == "") {
+  if (currentInputValue.value === "") {
     msgIsNullShow.value = true;
     setTimeout(() => {
       // 这里写上你想要3秒后执行的代码
@@ -324,19 +199,24 @@ const onclickSendMsg = () => {
 
   if (selectIsAll()) {
     onclickSendGroupMsg("all", currentInputValue.value);
-  }
+  } else if (selectIsAi()) {
-  else if (selectIsAi()) {
     //ai消息需要将上下文存储
-    sendAiChatContext.value.push({ answererType: 'User', message: currentInputValue.value, number: sendAiChatContext.value.length })
+    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 } } })
+    chatStore.addMsg({
+      messageType: "Ai",
+      content: currentInputValue.value,
+      sendUserId: userStore.id,
+      sendUserInfo: {user: {icon: userStore.icon}}
+    })
     //发送ai消息
     sendAiChat(sendAiChatContext.value);
-
+  } else {
-
-  }
-  else {
     onclickSendPersonalMsg(currentSelectUser.value.userId, currentInputValue.value);
   }
   changeInputValue("");
@@ -351,80 +231,197 @@ const onclickSendPersonalMsg = (receiveId, msg) => {
     content: msg,
     receiveId: receiveId
   });
-  sendPersonalMessage({ userId: receiveId, content: msg });
+  sendPersonalMessage({userId: receiveId, content: msg});
   //调用接口发送消息
 }
 
-const onclickClose = () => {
-  router.push({ path: "/index" })
-    .then(() => {
-      // 重新刷新页面
-      location.reload()
-    })
-}
-
 //点击发送群组消息按钮
 const onclickSendGroupMsg = (groupName, msg) => {
   //组还需区分是否给全部成员组
   if (selectIsAll) {
-    //添加到本地存储,不需要，因为广播自己能够接收
+    sendGroupMessage({content: msg});
-    // chatStore.addMsg({
+  } else {
-    //   messageType: "All",
-    //   sendUserId: userStore.id,
-    //   content: msg
-    // });
-    //调用接口发送消息
-    sendGroupMessage({ content: msg });
-  }
-  else {
     alert("暂未实现");
   }
 }
-//清除ai对话
-const clearAiMsg = () => {
-  sendAiChatContext.value = [];
-  chatStore.clearAiMsg();
-  ElMessage({
-    message: "当前会话清除成功",
-    type: "success",
-    duration: 2000,
-  });
 
-}
+//获取当前最后一条信息（显示在左侧菜单）
-
-//获取当前最后一条信息
 const getLastMessage = ((receiveId, itemType) => {
-  if (itemType == "all") {
+  if (itemType === "all") {
     return chatStore.allMsgContext[chatStore.allMsgContext.length - 1]?.content.substring(0, 15);
-  }
+  } else if (itemType === "ai") {
-  else if (itemType == "ai") {
     return chatStore.aiMsgContext[chatStore.aiMsgContext.length - 1]?.content.substring(0, 15);
-  }
+  } else {
-
-  else {
     const messageContext = chatStore.personalMsgContext.filter(x => {
       //两个条件
       //接收用户者id为对面id（我发给他）
       //或者，发送用户id为对面（他发给我）
-      return (x.receiveId == receiveId && x.sendUserId == userStore.id) ||
+      return (x.receiveId === receiveId && x.sendUserId === userStore.id) ||
-        (x.sendUserId == receiveId && x.receiveId == userStore.id);
+          (x.sendUserId === receiveId && x.receiveId === userStore.id);
     });
     return messageContext[messageContext.length - 1]?.content.substring(0, 15);
   }
 
 })
+
+
+/*----------以下方法是对内容通用处理，没有业务逻辑，无需变化----------*/
+  const imageSrc=(imageName)=> {
+    // 动态拼接路径
+    return new URL(`../../assets/chat_images/${imageName}`, import.meta.url).href;
+  }
+  
+  //绑定的input改变事件
+  const updateInputValue = (event) => {
+    changeInputValue(event.target.value);
+  }
+  
+  //输入框按键事件
+  const handleKeydownInput = () => {
+    // 检查是否按下 Shift + Enter
+    if (event.key === 'Enter' && event.shiftKey) {
+      // 允许输入换行
+      return; // 让默认行为继续
+    }
+    // 如果只按下 Enter，则阻止默认的提交行为，比如在表单中
+    if (event.key === 'Enter') {
+      // 阻止默认行为
+      event.preventDefault();
+      onclickSendMsg();
+      return;
+    }
+  }
+  
+  //关闭聊天框
+  const onclickClose = () => {
+    router.push({path: "/index"})
+        .then(() => {
+          // 重新刷新页面
+          location.reload()
+        })
+  }
+  
+//清除ai对话
+  const clearAiMsg = () => {
+    sendAiChatContext.value = [];
+    chatStore.clearAiMsg();
+    ElMessage({
+      message: "当前会话清除成功",
+      type: "success",
+      duration: 2000,
+    });
+
+  }
+
+
+//转换markdown
+  const toMarkDownHtml = (text) => {
+    marked.setOptions({
+          renderer: new marked.Renderer(),
+          highlight: function (code, language) {
+            return codeHandler(code, language);
+          },
+          pedantic: false,
+          gfm: true,//允许 Git Hub标准的markdown
+          tables: true,//支持表格
+          breaks: true,
+          sanitize: false,
+          smartypants: false,
+          xhtml: false,
+          smartLists: true,
+        }
+    );
+    //需要注意代码块样式
+    const soureHtml = marked(text);
+    nextTick(() => {
+      addCopyEvent();
+    })
+    return soureHtml;
+  }
+//code部分处理、高亮
+  const codeHandler = (code, language) => {
+    const codeIndex = parseInt(Date.now() + "") + Math.floor(Math.random() * 10000000);
+    //console.log(codeIndex,"codeIndex");
+    // 格式化第一行是右侧language和 “复制” 按钮；
+    if (code) {
+      const navCode = navHandler(code)
+      try {
+        // 使用 highlight.js 对代码进行高亮显示
+        const preCode = hljs.highlightAuto(code).value;
+        // 将代码包裹在 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);
+        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) {
+        console.log(error);
+      }
+    }
+
+  }
+//左侧导航栏处理
+  const navHandler = (code) => {
+    //获取行数
+    var linesCount = getLinesCount(code);
+    var currentLine = 1;
+    var liHtml = ``;
+    while (linesCount + 1 >= currentLine) {
+      liHtml += `<li class="nav-li">${currentLine}</li>`
+      currentLine++
+    }
+
+    let html = `<ul class="nav-ul">${liHtml}</ul>`
+    return html;
+  }
+  const BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
+  const getLinesCount = (text) => {
+    return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
+  }
+
+  let timerTip = null;
+//倒计时显示tip
+  const startCountTip = () => {
+    timerTip = setInterval(() => {
+      if (isShowTipNumber.value > 0) {
+        isShowTipNumber.value--;
+      } else {
+        clearInterval(timerTip); // 倒计时结束
+      }
+    }, 1000);
+  };
+//代码copy事件
+  const addCopyEvent = () => {
+    const copySpans = document.querySelectorAll('.copy');
+// 为每个 copy span 元素添加点击事件
+    copySpans.forEach(span => {
+      //先移除，再新增
+      span.removeEventListener('click', clickCopyEvent);
+      span.addEventListener('click', clickCopyEvent);
+    });
+  }
+  const clickCopyEvent = async function (event) {
+    const spanId = event.target.id;
+    console.log(codeCopyDic, "codeCopyDic")
+    console.log(spanId, "spanId")
+    await navigator.clipboard.writeText(codeCopyDic.filter(x => x.id === spanId)[0].code);
+    ElMessage({
+      message: "代码块复制成功",
+      type: "success",
+      duration: 2000,
+    });
+  }
 </script>
 
 <template>
 
   <div style="position: absolute; top: 0;left: 0;" v-show="isShowTipNumber>0">
-    <p>当前版本：1.6.2</p>
+    <p>当前版本：2.0.0</p>
     <p>tip:官方学习交流群每次发送消息消耗 1 钱钱</p>
     <p>tip:点击聊天窗口右上角“X”可退出</p>
     <p>tip:多人同时在聊天室时，左侧可显示其他成员</p>
 
-    <p>Ai聊天：当前Ai为 OpenAi ChatGpt4</p>
+    <p>tip:当前支持多种AI模式，由于接口收费原因，还请各位手下留情</p>
-    <p>tip:当前Ai为OpenAi ChatGpt4，由于接口收费原因，还请各位手下留情</p>
     <p>tip:ai对话为持续对话，已优化输出速度</p>
     <p>tip:ai对话只有本地存储了记录，可点击清除或刷新</p>
     <p>即将自动隐藏tip：{{ isShowTipNumber }}</p>
@@ -436,19 +433,19 @@ const getLastMessage = ((receiveId, itemType) => {
         <img :src="userStore.icon">
       </div>
       <ul class="top-icon">
-        <li><img src="@/assets/chat_images/wechat.png" /></li>
+        <li><img src="@/assets/chat_images/wechat.png"/></li>
-        <li><img src="@/assets/chat_images/addressBook.png" /></li>
+        <li><img src="@/assets/chat_images/addressBook.png"/></li>
-        <li><img src="@/assets/chat_images/collection.png" /></li>
+        <li><img src="@/assets/chat_images/collection.png"/></li>
-        <li><img src="@/assets/chat_images/file.png" /></li>
+        <li><img src="@/assets/chat_images/file.png"/></li>
-        <li><img src="@/assets/chat_images/friend.png" /></li>
+        <li><img src="@/assets/chat_images/friend.png"/></li>
-        <li><img src="@/assets/chat_images/line.png" /></li>
+        <li><img src="@/assets/chat_images/line.png"/></li>
-        <li><img src="@/assets/chat_images/look.png" /></li>
+        <li><img src="@/assets/chat_images/look.png"/></li>
-        <li><img src="@/assets/chat_images/sou.png" /></li>
+        <li><img src="@/assets/chat_images/sou.png"/></li>
       </ul>
       <ul class="bottom-icon">
-        <li><img src="@/assets/chat_images/mini.png" /></li>
+        <li><img src="@/assets/chat_images/mini.png"/></li>
-        <li><img src="@/assets/chat_images/phone.png" /></li>
+        <li><img src="@/assets/chat_images/phone.png"/></li>
-        <li><img src="@/assets/chat_images/other.png" /></li>
+        <li><img src="@/assets/chat_images/other.png"/></li>
       </ul>
 
     </div>
@@ -457,51 +454,37 @@ const getLastMessage = ((receiveId, itemType) => {
       <div class="header">
         <div class="header-div">
           <div class="search">
-            <img src="@/assets/chat_images/search.png" />
+            <img src="@/assets/chat_images/search.png"/>
             <span>搜索</span>
           </div>
-          <button type="button"> <img src="@/assets/chat_images/add.png" /></button>
+          <button type="button"><img src="@/assets/chat_images/add.png"/></button>
         </div>
       </div>
       <div class="user-list">
-        <div class="user-div" @click="onclickUserItem(null, 'all')"
+        
-          :class="{ 'select-user-item': currentSelectUser == 'all' }">
+        
+        
+        <div  v-for="item in inputListDataStore" :key="item.key" class="user-div" 
+              @click="onclickUserItem(null, item.key)"
+             :class="{ 'select-user-item': currentSelectUser === item.key }">
           <div class="user-div-left">
-            <img src="@/assets/chat_images/yilogo.png" />
+            <img style="height: 48px;width: 48px;  " :src="imageSrc(item.logo)" />
             <div class="user-name-msg">
-              <p class="font-name">官方学习交流群</p>
+              <p class="font-name">{{item.name}}</p>
-              <p class="font-msg">{{ getLastMessage(null, 'all') }}</p>
+              <p class="font-msg">{{ getLastMessage(null, item.key) }}</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">
-            10:28
-          </div>
-
-        </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 }">
+             :class="{ 'select-user-item': currentSelectUser?.userId === item.userId }">
           <div class="user-div-left">
 
-            <img :src="getChatUrl(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, 'user') }}</p>
@@ -516,19 +499,20 @@ const getLastMessage = ((receiveId, itemType) => {
 
     <div class="right">
       <div class="header">
-        <div class="header-left">{{ currentHeaderName }} <span class="clear-msg" v-show="selectIsAi()" @click="clearAiMsg">点击此处清空当前对话</span>
+        <div class="header-left">{{ currentHeaderName }} <span class="clear-msg" v-show="selectIsAi()"
+                                                               @click="clearAiMsg">点击此处清空当前对话</span>
         </div>
 
         <div class="header-right">
           <div>
             <ul>
-              <li><img src="@/assets/chat_images/fixed.png" /></li>
+              <li><img src="@/assets/chat_images/fixed.png"/></li>
-              <li><img src="@/assets/chat_images/min.png" /></li>
+              <li><img src="@/assets/chat_images/min.png"/></li>
-              <li><img src="@/assets/chat_images/max.png" /></li>
+              <li><img src="@/assets/chat_images/max.png"/></li>
-              <li style="cursor: pointer;" @click="onclickClose"><img src="@/assets/chat_images/close.png" /></li>
+              <li style="cursor: pointer;" @click="onclickClose"><img src="@/assets/chat_images/close.png"/></li>
             </ul>
           </div>
-          <div class="more"><img src="@/assets/chat_images/other2.png" /></div>
+          <div class="more"><img src="@/assets/chat_images/other2.png"/></div>
 
 
         </div>
@@ -539,20 +523,20 @@ const getLastMessage = ((receiveId, itemType) => {
 
 
           <!-- 对话框右侧 -->
-          <div class="content-myself content-common" v-if="item.sendUserId == userStore.id">
+          <div class="content-myself content-common" v-if="item.sendUserId === userStore.id">
             <div class="content-myself-msg content-msg-common " v-html="item.content"></div>
 
-            <img :src="getChatUrl(item.sendUserInfo?.user.icon, 'right')" />
+            <img :src="getChatUrl(item.sendUserInfo?.user.icon, 'right')"/>
           </div>
 
           <!-- 对话框左侧 -->
           <div class="content-others content-common" v-else>
-            <img :src="getChatUrl(item.sendUserInfo?.user.icon, 'left')" />
+            <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() }"
-                v-html="item.content">
+                   v-html="item.content">
 
               </div>
             </div>
@@ -565,15 +549,15 @@ const getLastMessage = ((receiveId, itemType) => {
         <div class="bottom-tool">
 
           <ul class="ul-left">
-            <li><img src="@/assets/chat_images/emoji.png" /></li>
+            <li><img src="@/assets/chat_images/emoji.png"/></li>
-            <li><img src="@/assets/chat_images/sendFile.png" /></li>
+            <li><img src="@/assets/chat_images/sendFile.png"/></li>
-            <li><img src="@/assets/chat_images/screenshot.png" /></li>
+            <li><img src="@/assets/chat_images/screenshot.png"/></li>
-            <li><img src="@/assets/chat_images/chatHistory.png" /></li>
+            <li><img src="@/assets/chat_images/chatHistory.png"/></li>
           </ul>
 
           <ul class="ul-right">
-            <li><img src="@/assets/chat_images/landline.png" /></li>
+            <li><img src="@/assets/chat_images/landline.png"/></li>
-            <li><img src="@/assets/chat_images/videoChat.png" /></li>
+            <li><img src="@/assets/chat_images/videoChat.png"/></li>
           </ul>
 
         </div>
@@ -582,9 +566,9 @@ const getLastMessage = ((receiveId, itemType) => {
 
         </div> -->
         <textarea class="bottom-input" v-model="currentInputValue" @input="updateInputValue"
-        @keydown="handleKeydownInput"
+                  @keydown="handleKeydownInput"
 
-         >
+        >
 
 </textarea>
         <div class="bottom-send">
@@ -599,6 +583,10 @@ const getLastMessage = ((receiveId, itemType) => {
   </div>
 </template>
 <style scoped lang="scss">
+ul {
+  list-style-type: none;
+}
+
 .body {
   height: 790px;
   width: 1400px;
@@ -912,7 +900,6 @@ const getLastMessage = ((receiveId, itemType) => {
 }
 
 
-
 .content-common {
   display: flex;
   margin-bottom: 18px;
@@ -924,7 +911,7 @@ const getLastMessage = ((receiveId, itemType) => {
 }
 
 .content-msg-common {
- // display: flex;
+  // display: flex;
   align-content: center;
   flex-wrap: wrap;
   position: relative;
@@ -1068,6 +1055,7 @@ const getLastMessage = ((receiveId, itemType) => {
   margin-bottom: 0;
   //overflow-x: hidden;
   overflow-x: scroll;
+
   .header {
     background-color: #409eff;
     color: white;
@@ -1077,7 +1065,8 @@ const getLastMessage = ((receiveId, itemType) => {
     padding-top: 5px;
 
 
-    .language {}
+    .language {
+    }
 
     .copy:hover {
       cursor: pointer;
@@ -1111,15 +1100,18 @@ const getLastMessage = ((receiveId, itemType) => {
 
 
 }
-.clear-msg{
+
+.clear-msg {
   font-size: large;
   margin-left: 10px;
   cursor: pointer; /* 设置为手型 */
 }
+
 .clear-msg:hover {
   color: red;
   cursor: pointer; /* 设置鼠标悬浮为手型 */
 }
+
 ::v-deep(.nav-ul) {
   border-right: 1px solid #FFFFFF;
   margin-top: 12px;