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

liudong

2024-08-03 6d453537c8acf92ea5d9decbf6744df07f00efb1

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

 src/api/Agent.ts

New file
@@ -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 @@

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 { 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 @@
let tabs = ref([])
const height = ref('calc(100vh - 150px)')
const heightrg = ref('calc(100vh - 100px)')

const emit =  defineEmits(['cancelModal'])
const rules = {
  name: [
    {
@@ -125,9 +165,35 @@
}


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;
@@ -153,10 +219,13 @@
};
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 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 @@
      console.log('values', values);
    });
  };
  onBeforeMount(()=>{
    queryList();
  })
</script>

<script lang="ts">