智能体管理的页面开发和功能开发

src/api/Agent.ts

@@ -0,0 +1,59 @@
+import axios from "axios";
+import qs from "query-string";
+import type { DescData } from "@arco-design/web-vue/es/descriptions/interface";
+
+
+// 智能体列表接口
+export function querydialogList(params) {
+  return axios.get("/api/v1/dialog/list", {
+    params
+  });
+}
+
+// 智能体详情接口
+export function querydialogdetail(params) {
+  return axios.get("/api/v1/dialog/get", {
+    params
+  });
+}
+
+
+// 智能体聊天接口
+export function conversationList(params) {
+  return axios.get("/api/v1/conversation/list", {
+    params
+  });
+}
+
+// 智能体创建/更新接口
+export function dialogSet(params) {
+  return axios.post("/api/v1/dialog/set", params);
+}
+
+// 智能体删除接口
+export function deletedialog(params) {
+  return axios.post("/api/v1/dialog/rm", params);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/views/dmx/IntelligentAgent/components/addAgent.vue

@@ -23,7 +23,7 @@
         <div style="width: 100%;text-align: right">
           <a-button @click="visible = false">取消</a-button>
           <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
-          <editAgent ref="editAgentKuai" typeAngint="add" :formData="form"></editAgent>
+          <editAgent ref="editAgentKuai" typeAngint="add" :formData="form" @cancelModal="handleCancel"></editAgent>
         </div>
       </a-form-item>
     </a-form>
@@ -103,6 +103,8 @@ defineExpose({
 
 const handleCancel = () => {
   visible.value = false;
+  formRef.value.resetFields();
+  form.name = ''
 }
 
 const handleOpened =(el) => {

src/views/dmx/IntelligentAgent/components/editAgent.vue

@@ -1,6 +1,6 @@
 
 <template>
-  <a-button  v-if="typeAngint=='edit'" type="text" size="small" @click="handleClick">
+  <a-button  v-if="typeAngint=='edit'" type="text" size="small" @click="editClick">
     <template #icon>
       <icon-tool />
     </template>
@@ -26,8 +26,10 @@
         </div>
         <div style="background:#eeeeee;width: 50%;">
           <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit"  layout="vertical" >
-
             <a-collapse :default-active-key="['1']">
+              <a-collapse-item header="基础信息" key="0" v-if="typeAngint == 'edit'">
+                <a-input v-model="form.name" placeholder="请输入智能体名称"  style="width:200px;margin-top: 10px" />
+              </a-collapse-item>
               <a-collapse-item header="AI模型配置" key="1">
                 <a-space direction="vertical" size="large">
                   <a-select :size="'large'" v-model="form.llm_id" :style="{width:'25rem'}" placeholder="请选择 ...">
@@ -58,7 +60,7 @@
             </a-collapse>
 
             <a-form-item>
-              <div style="position: absolute;right: 10px;top: 10px">
+              <div style="position: absolute;right: 10px;top: 0px;z-index: 99999">
 <!--                <a-button @click="visible = false">取消</a-button>-->
                 <a-button style="margin-left: 10px" type="primary" html-type="submit">保存</a-button>
               </div>
@@ -101,11 +103,49 @@ import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue";
 import { IconSend } from "@arco-design/web-vue/es/icon";
 import { queryKbList, queryModelList } from "@/api/kbList";
 import useLoading from "@/hooks/loading";
+import { dialogSet } from "@/api/Agent";
+import { Message } from "@arco-design/web-vue";
 const {  setLoading } = useLoading(true);
 const props =  defineProps(['typeAngint','formData'])
 const visible = ref(false);
 const loading = ref(false);
-const form = reactive({});
+const form = reactive({
+  name: "",
+  icon: "",
+  language: "English",
+  prompt_config: {
+    empty_response: "",
+    prologue: "你好！ 我是你的助理，有什么可以帮到你的吗？",
+    quote: true,
+    self_rag: true,
+    system: "示例：\n" +
+      "你是 XX，具有 XX 经验，擅长 XX，…\n" +
+      "你的任务是 XX ，需要按照以下步骤执行：\n" +
+      "1. XX\n" +
+      "2. XX\n" +
+      "3. …\n",
+    parameters: [
+      {
+        "key": "knowledge",
+        "optional": false
+      }
+    ]
+  },
+  kb_ids: [
+    "985eda244efc11ef9a7a0242ac120006"
+  ],
+  llm_id: "qwen-plus",
+  llm_setting: {
+    temperature: 0.1,
+    top_p: 0.3,
+    presence_penalty: 0.4,
+    frequency_penalty: 0.7,
+    max_tokens: 512
+  },
+  similarity_threshold: 0.2,
+  vector_similarity_weight: 0.30000000000000004,
+  top_n: 8
+});
 const system = ref('');
 const embdId = ref('');
 const modelList = ref({});
@@ -114,7 +154,7 @@ const formRef = ref(null);
 let tabs = ref([])
 const height = ref('calc(100vh - 150px)')
 const heightrg = ref('calc(100vh - 100px)')
-
+const emit =  defineEmits(['cancelModal'])
 const rules = {
   name: [
     {
@@ -125,10 +165,36 @@ const rules = {
 }
 
 
-const handleSubmit = ({values, errors}) => {
-  console.log('values:', values, '\nerrors:', errors)
+const handleSubmit = async({values, errors}) => {
+  // console.log('values:', values, '\nerrors:', errors)
+  let title = '创建成功';
+  let formNew = {...form}
+  if(props.typeAngint == 'edit'){
+    formNew.dialog_id = form.id;
+    delete formNew.id;
+    delete formNew.off;
+    title = '修改成功';
+  }
+
+  const data = await dialogSet(formNew);
+  if(data.code == 0){
+    Message.success(title);
+    handleCancel()
+
+  }
+
 }
 
+const editClick = (data) => {
+  visible.value = true;
+
+  console.log(props.formData);
+  Object.assign(form,props.formData);
+  console.log(form);
+  system.value = form.prompt_config.system;
+
+};
+
 const handleClick = (data) => {
   visible.value = true;
   nextTick(()=>{
@@ -153,10 +219,13 @@ const handleBeforeOk = (done) => {
 };
 const handleCancel = () => {
   visible.value = false;
+  emit('cancelModal')
 }
 
 const handleOpened =(el) => {
   // formRef.value.resetFields();
+
+
 }
 const queryModel = async (params) => {
   try {

src/views/dmx/IntelligentAgent/index.vue

@@ -8,6 +8,7 @@
             <a-input-search
               :placeholder="$t('cardList.searchInput.placeholder')"
               style="width: 240px;"
+              @change="queryList"
             />
           </div>
           <a-divider style="margin: 10px 0" />
@@ -37,7 +38,7 @@
 <!--                    </div>-->
                   </a-card>
                 </div>
-                <div class="card-wrap"    v-for="(item, index) of data" :key="index">
+                <div class="card-wrap"    v-for="(item, index) of agentList" :key="item.id">
                   <a-card :bordered="false" hoverable >
                     <a-avatar :style="{ backgroundColor: '#3370ff' }">
                       <img
@@ -46,7 +47,7 @@
                         src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
                       />
                     </a-avatar>
-                    <a-switch style="position: absolute;top: 10px;right: 10px" size="medium">
+                    <a-switch v-model="item.off" style="position: absolute;top: 10px;right: 10px" size="medium" @change="handleChange(item)">
                       <template #checked>
                         上线
                       </template>
@@ -57,22 +58,25 @@
                     <div class="arco-card-body-content">
                       <div class="arco-card-body-content-top">
                         <span style="font-size: 18px;font-weight: 900">
-                          {{ item.title }}
+                          {{ item.name }}
                         </span>
                       </div>
                       <div class="arco-card-body-content-down">
-                        通过描述角色和任务来创建你的智能体
-                        智能体可以调用多个工作流和工具
+                        {{item.prompt_config.prologue}}
                       </div>
 
                     </div>
                     <div style="position: absolute; bottom: 1.4rem; left: 1rem;">
-                      <icon-user /> <span style="font-size: 12px">王浩</span>
+                      <icon-user /> <span style="font-size: 12px">
+<!--                      {{ item.name }}-->
+                    </span>
                     </div>
                     <div style="position: absolute; bottom: 1rem; right: 1rem;">
                       <a-space>
-<!--                        <editAgent typeAngint="edit"></editAgent>-->
-                        <a-popconfirm :content="'确定删除吗'" type="warning" @ok="deleteItem(record)">
+                        <span v-show="!item.off">
+                          <editAgent  ref="editAgentKuai" typeAngint="edit" :formData="form" @cancelModal="handleCancel"></editAgent>
+                        </span>
+                        <a-popconfirm :content="'确定删除吗'" type="warning" @ok="deleteItem(item)">
                           <a-button  type="text" size="small">
                             <template #icon>
                               <icon-delete />
@@ -93,31 +97,35 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, nextTick } from 'vue';
+import { ref, reactive, nextTick, onBeforeMount } from "vue";
   import addAgent from "@/views/dmx/IntelligentAgent/components/addAgent.vue";
   import editAgent from "@/views/dmx/IntelligentAgent/components/editAgent.vue";
-  import { kbdocumentrm } from "@/api/kbList";
+  import { kbdocumentrm, queryKbList } from "@/api/kbList";
   import { Message } from "@arco-design/web-vue";
+import { deletedialog, querydialogList } from "@/api/Agent";
+  import useLoading from "@/hooks/loading";
+  const { loading, setLoading } = useLoading(true);
 
   let count = 5;
   const activeKey = ref(1);
   const addAgents = ref();
-  const data = ref([
-    {
-      key: 2,
-      title: '内容质检',
-      content: 'Content of Tab Panel 2',
-    },
-    {
-      key: 3,
-      title: '开通服务',
-      content: 'Content of Tab Panel 3',
-    },
-    {
-      key: 4,
-      title: '规则预置',
-      content: 'Content of Tab Panel 4',
-    },
+  const editAgentKuai = ref();
+  const agentList = ref([
+    // {
+    //   key: 2,
+    //   title: '内容质检',
+    //   content: 'Content of Tab Panel 2',
+    // },
+    // {
+    //   key: 3,
+    //   title: '开通服务',
+    //   content: 'Content of Tab Panel 3',
+    // },
+    // {
+    //   key: 4,
+    //   title: '规则预置',
+    //   content: 'Content of Tab Panel 4',
+    // },
   ]);
 const changeTabs = (val) => {
   activeKey.value = val;
@@ -132,25 +140,45 @@ const changeTabs = (val) => {
   const visible = ref(false);
   const formRef = ref(null);
   const form = reactive({
-    size: 'medium',
-    name: '',
+    // size: 'medium',
+    // name: '',
   });
+
+  const queryList = async (
+    params = {  }
+  ) => {
+    setLoading(true);
+    try {
+      const { data } = await querydialogList(params);
+      console.log(data, 'data');
+      agentList.value = data.map((item) => {
+        return {
+          ...item,
+          off: true,
+        }
+      });
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const   deleteItem =  async (row)=>{
     console.log(row);
-    let data = await kbdocumentrm({doc_id: row.id})
+    let data = await deletedialog({dialog_ids: [row.id]})
     if(data.code == 0){
       Message.success('删除成功');
-      console.log(kbobj, 'kbobj');
-      fetchData({
-        kb_id: kbobj.id,
-        page: 1,
-        page_size: 20
-      })
+      queryList()
     }
   }
+  const handleChange = async (item) => {
+    if (item){
+      Object.assign(form,item)
+    }
+  };
   const handleCancel = () => {
-    formRef.value.resetFields();
-    visible.value = false;
+    queryList()
   };
   const handleSubmit = ({ values, errors }) => {
     this.$refs.formRef.validate().then((res, a, b) => {
@@ -158,6 +186,9 @@ const changeTabs = (val) => {
       console.log('values', values);
     });
   };
+  onBeforeMount(()=>{
+    queryList();
+  })
 </script>
 
 <script lang="ts">