智能体：支持会话分享和复制

1 month ago · 577529c7ad
4 changed files with 277 additions and 5 deletions
--- a/src/api/doc/space.ts
+++ b/src/api/doc/space.ts
@ -220,4 +220,29 @@ export function getAiagentList(data?: any){
    method: 'post',
    data: data
  });
+}
+
+/**
+ * 更新会话
+ * @requires key
+ * 
+ */
+export function getShareChat(key: string){
+  return request({
+    url: '/aibot/chat/shared/'+key,
+    method: 'get',
+  });
+}
+
+/**
+ * 更新会话
+ * @requires key  agentID+chatID+index
+ * @requires data
+ */
+export function newShareChat(data: any){
+  return request({
+    url: '/aibot/chat/share',
+    method: 'post',
+    data: data
+  });
 }
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -38,6 +38,11 @@ export const constantRoutes: RouteRecordRaw[] = [
    component: () => import("@/views/doc/onlyoffice.vue"),
    meta: { hidden: true },
  },
+  {
+    path: "/agent",
+    component: () => import("@/views/doc/showtext.vue"),
+    meta: { hidden: true },
+  },
  
  {
    path: "/",
--- a/src/views/doc/agent.vue
+++ b/src/views/doc/agent.vue
@ -5,11 +5,11 @@
 -->
 <script lang="ts" setup>
 import {
-  Promotion,
+  Promotion,DocumentCopy,
  Remove
 } from '@element-plus/icons-vue'
-import { doAiTraining,doAiChat,aiChatData,getAiChatList,getAiChat,setAiChat,delAiChat} from "@/api/doc/space"
-import {ElText,ElInput, ButtonInstance} from "element-plus";
+import { doAiChat,getAiChatList,getAiChat,setAiChat,delAiChat,newShareChat} from "@/api/doc/space"
+import {ElText,ElInput} from "element-plus";
 import { VueMarkdown } from '@crazydos/vue-markdown'
 import rehypeRaw from 'rehype-raw'
 import remarkGfm from 'remark-gfm'
@ -19,6 +19,7 @@ const checkedModel = ref([])
 //支持的模式
 const aimodels = [{name:'联网检索',key:"onlineSearch"}, {name:'公司知识库',key:"useDataset"}]
 const baseURL=import.meta.env.VITE_APP_BASE_API
+const siteHost=document.location.origin; 
 const conversation=ref("") //当前会话的uuid
 const myquestion=ref('')
 const controller = ref<AbortController | null>(null) 
@ -217,6 +218,49 @@ function formatRefContent(content:string){
  return result
 }

+//复制会话记录
+function onCopyChat(idx:number){
+  let el = document.querySelector('#content'+idx) as HTMLElement | null;
+  let content = el?.innerText;
+  if(!navigator.clipboard) alert("clipboard 不可用")
+    navigator.clipboard.writeText(content as string)
+}
+
+//新建分享会话记录
+function onShareChat(agID:string,chatID:string,idx:number){
+  const arr=<{ask:boolean,content:string}[]>([])
+  //第一条为问题，第二条为回答内容
+  arr.push({
+    ask:interact_msg.value[idx-1].ask,
+    content:interact_msg.value[idx-1].content
+  })
+  arr.push({
+    ask:interact_msg.value[idx].ask,
+    content:interact_msg.value[idx].content
+  })
+
+  newShareChat({
+    key:agID+chatID+idx.toString(),
+    data:JSON.stringify(arr)
+  }).then(resp=>{
+    let _shareURL=`${siteHost}/#/agent?shared=${resp.key}`
+    ElMessageBox({
+      title: '分享链接',
+       customStyle: { '--el-messagebox-width':'800px',padding:'40px'},
+      message: () => h('div',{style:{display:'flex','flex-direction':'column','line-height':'34px', width:'600px'}},[
+        h(ElText,{style:{'align-self':'flex-start','font-weight': 'bold'}},()=>"链接："+_shareURL),
+      ]),
+      confirmButtonText: '复制链接',
+      showCancelButton: true
+    }).then(()=>{
+      if(!navigator.clipboard) alert("clipboard 不可用")
+      navigator.clipboard.writeText(_shareURL)
+    })
+  }).catch(err=>{
+    console.log(err)
+  })
+}
+
 //渲染完页面再执行
 onMounted(() => {
  currentAgent.value=props.agent
@ -246,11 +290,16 @@ onMounted(() => {
      </div>
      <div  style="position: relative;background: white;overflow-y: auto;">
        <div class="reply_area" >
-          <template v-for="msg of interact_msg">
+          <template v-for="msg,index of interact_msg">
            <el-text v-if="msg.ask"  class="t_ask" >{{ msg.content }}</el-text>
            <div v-else class="t_resp">
              <el-text  style="white-space: pre-line" v-html="msg.think"></el-text>
-              <VueMarkdown :markdown="msg.content" :rehype-plugins="[rehypeRaw]" :remark-plugins="[remarkGfm]" ></VueMarkdown>
+              <VueMarkdown :id="'content'+index" :markdown="msg.content" :rehype-plugins="[rehypeRaw]" :remark-plugins="[remarkGfm]" ></VueMarkdown>
+              <div v-if="conversation" class="actions">
+                <el-button :icon="Promotion" size="small" circle @click="onShareChat(agent.uuid,conversation,index)"></el-button> 分享
+                <el-button :icon="DocumentCopy" size="small" circle @click="onCopyChat(index)"></el-button> 复制
+              </div>
+              
              <div v-if="msg.docinfo?.length>0" class="doc_ref">
                引用<hr>
                <el-tooltip v-for="doc in msg.docinfo" placement="top" effect="dark">
@ -327,6 +376,13 @@ onMounted(() => {
  font-size: 16px;
  color: black;
 }
+.actions{
+  display: flex;
+  width: 100%;
+  margin: 5px 0;
+  background-color: #f3f3f3; 
+  justify-content: center;
+}
 .dynamic-width-message-box-byme .el-message-box__message{
  width: 100%;
 }
@ -411,6 +467,9 @@ onMounted(() => {
    ul{
      margin-left: 30px;
      list-style: disc;
+      li{
+        list-style: disc;
+      }
      ul{
        margin-left: 30px;
      }
--- a/src/views/doc/showtext.vue
+++ b/src/views/doc/showtext.vue
@ -0,0 +1,183 @@
+<!--
+@ 作者: han2015
+@ 时间: 2025-05-12 15:39:13
+@ 备注: aibot组件
+-->
+<script lang="ts" setup>
+import { getShareChat} from "@/api/doc/space"
+import {ElText} from "element-plus";
+import { VueMarkdown } from '@crazydos/vue-markdown'
+import rehypeRaw from 'rehype-raw'
+import remarkGfm from 'remark-gfm'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const interact_msg=ref<{ask:boolean,think:string,content:string,docinfo?:any[],share:boolean}[]>([])
+
+//消息体
+interface message{
+  ask:boolean,
+  think:string,
+  content:string
+}
+//会话记录
+interface chatRecord{
+  uuid:string,
+  agentuuid:string,
+  brief:string,
+  messages:message[]
+}
+
+
+//查看分享chat记录
+function showSharedChat(uuid:string){
+  getShareChat(uuid).then(resp=>{
+    let data=JSON.parse(resp.data.content)
+    data.share=true
+    interact_msg.value = data
+  }).catch(err=>{
+    alert(err)
+  })
+}
+
+//渲染完页面再执行
+onMounted(() => {
+  const query = route.query
+  //只是分享链接的请求
+  if (query.shared && query.shared!=""){
+    showSharedChat(query.shared as string)
+  }
+});
+</script>
+
+<template>
+  <div class="app_container">
+    <div class="reply_area" >
+      <span class="text_title">恒信高科AI平台</span>
+      <template v-for="msg,index of interact_msg">
+        <el-text v-if="msg.ask"  class="t_ask" >{{ msg.content }}</el-text>
+        <div v-else class="t_resp">
+          <el-text  style="white-space: pre-line" v-html="msg.think"></el-text>
+          <VueMarkdown :id="'content'+index"  :markdown="msg.content" :rehype-plugins="[rehypeRaw]" :remark-plugins="[remarkGfm]" ></VueMarkdown> 
+        </div>    
+      </template>   
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app_container {
+  height: calc(100vh - 65px);
+  width: 50%;
+  overflow-y:auto;
+  background-color: #efefef;
+  margin: auto;
+}
+.text_title{
+    text-align: center;
+    margin-bottom: 12px;
+    font-size: larger;
+    font-weight: bold;
+}
+.question_com{
+    position: fixed;
+    padding: 0 13px;
+    text-align: center;
+    display: block;
+    button{
+      position: absolute;
+      bottom: 27px;
+      right: 20px;
+    }
+}
+.reply_area{
+  display: flex;
+  min-height: 20%;
+  flex-direction: column;
+  margin: 15px 15px 210px 15px;
+}
+.t_ask{
+  align-self: end;
+  line-height: 34px;
+  background-color: rgb(188 211 241);
+  padding: 0 30px;
+  border-radius:10px;
+}
+.t_resp{
+  align-self: start;
+  line-height: 23px;
+  font-size: 13px;
+  color: black;
+}
+.actions{
+  display: flex;
+  width: 100%;
+  margin: 5px 0;
+  background-color: #f3f3f3; 
+  justify-content: center;
+}
+.dynamic-width-message-box-byme .el-message-box__message{
+  width: 100%;
+}
+
+</style>
+
+<style>
+  think {
+    color: #939393;
+    margin-bottom: 8px;
+    display: block;
+  }
+
+  .t_resp{
+    h2,h3,h4,h5{
+      margin: 12px 0;
+    }
+    p{
+      margin-left: 16px;
+    }
+    p+ul{
+      margin-left: 56px;
+    }
+    li p{
+      margin-left: 0;
+    }
+    ol{
+      margin-left: 14px;
+      ul{
+        margin-left: 30px;
+        li{
+          list-style: disc;
+        }
+      }
+    }
+    ol>li{
+      list-style-type: decimal;
+    }
+    ul{
+      margin-left: 30px;
+      list-style: disc;
+      li{
+        list-style: disc;
+      }
+      ul{
+        margin-left: 30px;
+      }
+    }
+    table{
+      border: 0px solid;
+      border-spacing: 1px;
+      border-collapse: collapse;
+      th{
+        background-color: #e5e5e5;
+        border: 1px solid;
+        min-width: 180px;
+      }
+      td{
+        border: 1px solid;
+        min-width: 180px;
+      }
+    } 
+
+  }
+</style>