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

liudong

2024-08-05 2243c9016feede8fd2703c62e4615444821d4133

 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>
@@ -20,22 +20,38 @@
        <div style="width: 50%;height: 100%">
          <div style="padding: 10px;font-size: 12px;color: #2a2a2b;">智能体画像</div>
          <div>

            <a-textarea v-model="system" placeholder="" disabled style="height: 400px;background: #ffffff;color: #666666"  />
          </div>

        </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="AI模型配置" 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="开场引导" :key="'2'">
              <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="请选择 ...">
                    <a-optgroup  :label="index" v-for="(item,index) in modelList" :key=index>
                      <a-option
                        v-for="(obj) in item"
                        :key='obj.fid'
                        :value="obj.llm_id"
                      >
                        {{obj.llm_name}}
                      </a-option>
                    </a-optgroup>
                  </a-select>
                </a-space>
              </a-collapse-item>
              <a-collapse-item header="开场引导" :key="'2'" disabled>

              </a-collapse-item>
              <a-collapse-item header="知识库" key="3">

                <a-select v-model="form.kb_ids" :style="{width:'25rem'}" placeholder="请选择 ..." multiple >
                  <a-option v-for="(item) in tabs" :key="item.id"  :value="item.id">{{item.name}}</a-option>
                </a-select>
              </a-collapse-item>
              <a-collapse-item header="工具" key="4" disabled>
              </a-collapse-item>
@@ -44,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>
@@ -85,16 +101,60 @@
<script lang="ts" setup>
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({

  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({});
const renderData = ref([]);
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: [
    {
@@ -105,15 +165,42 @@
}


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(()=>{
    Object.assign(form,data);
    console.log(form);
    system.value = form.prompt_config.system;
  })
};
defineExpose({
@@ -132,12 +219,25 @@
};
const handleCancel = () => {
  visible.value = false;
  emit('cancelModal')
}

const handleOpened =(el) => {
  formRef.value.resetFields();
}
  // formRef.value.resetFields();


}
const queryModel = async (params) => {
  try {
    const data = await queryModelList(params);
    console.log(data.data, '大模型列表');
    modelList.value = data.data
  } catch (err) {
    // you can report use errorHandler or other
  } finally {

  }
};
const file = ref();

const onChange = (_, currentFile) => {
@@ -150,8 +250,27 @@
  file.value = currentFile;
};

onBeforeMount(()=>{


const knowledgeData = async (
  params = { page: 1, page_size: 20 }
) => {
  setLoading(true);
  try {
    const { data } = await queryKbList(params);
    console.log(data, 'data');
    tabs.value = data;
    console.log(tabs.value, 'tabs');
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};

onBeforeMount(()=>{
  queryModel({})
  knowledgeData()
})
onMounted(()=>{