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

liudong

2024-08-02 3a022dc2caa78267a681824ea1c303f140cd6797

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

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

@@ -16,11 +16,14 @@
      <a-form-item field="name" label="智能体名称">
        <a-input v-model="form.name" placeholder="请输入名称"/>
      </a-form-item>

      <a-form-item  label="你希望智能体的角色是什么，具体完成什么任务？">
        <a-textarea v-model="form.prompt_config.system" placeholder="" style="height: 180px"/>
      </a-form-item>
      <a-form-item>
        <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>
        </div>
      </a-form-item>
    </a-form>
@@ -29,28 +32,47 @@

<script lang="ts" setup>
import { onMounted ,onBeforeMount, reactive, ref } from "vue";
import editAgent from "@/views/dmx/IntelligentAgent/components/editAgent.vue";

const visible = ref(false);
const loading = ref(false);
const editAgentKuai = ref();
const form = reactive({
  size: "medium",
  name: "",
  age: undefined,
  section: "0",
  province: "haidian",
  options: [],
  date: "",
  time: "",
  radio: "radio one",
  slider: 5,
  score: 5,
  switch: false,
  multiSelect: ["section one"],
  treeSelect: "",
  raptor: false,
  prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' +
    '      {cluster_content}\n' +
    '以上就是你需要总结的内容。',
  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 formRef = ref(null);

@@ -67,6 +89,9 @@

const handleSubmit = ({values, errors}) => {
  console.log('values:', values, '\nerrors:', errors)
  if(!errors){
    editAgentKuai.value.handleClick(form)
  }
}

const handleClick = () => {
@@ -81,13 +106,20 @@
}

const handleOpened =(el) => {
  Object.assign(form,{
    name: '',// 用户名
    nameJoin: '',// 昵称
    post: '',// 岗位
    txt: '',// 备注
  });
  // Object.assign(form,{
  //   name: '',// 用户名
  //   nameJoin: '',// 昵称
  //   post: '',// 岗位
  //   txt: '',// 备注
  // });
  formRef.value.resetFields();
  form.name = ''
  form.prompt_config.system = "示例：\n" +
    "你是 XX，具有 XX 经验，擅长 XX，…\n" +
    "你的任务是 XX ，需要按照以下步骤执行：\n" +
    "1. XX\n" +
    "2. XX\n" +
    "3. …\n"
}

const file = ref();

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

@@ -1,119 +1,99 @@

<template>
  <a-button  type="text" size="small" @click="handleClick">
  <a-button  v-if="typeAngint=='edit'" type="text" size="small" @click="handleClick">
    <template #icon>
      <icon-tool />
    </template>
  </a-button>

  <a-modal v-model:visible="visible" title="添加模式"
<!--  <a-button v-if="typeAngint=='add'" style="margin-left: 10px" type="primary" @click="handleClick">确定</a-button>-->
  <a-modal v-model:visible="visible" title=""
           @before-open="handleOpened"
           @cancel="handleCancel"
           :footer="false"
           title-align="start"
           width="600px"
           fullscreen
  >
    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" :style="{width:'90%',margin:'0 auto'}" layout="vertical" >
      <a-form-item field="name" label="模型类型">
        <a-select v-model="form.section" placeholder="请选择">
          <a-option value="section one">Section One</a-option>
          <a-option value="section two">Section Two</a-option>
          <a-option value="section three">Section Three</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="name" label="模型名称">
        <a-input v-model="form.name" placeholder="请输入名称"/>
      </a-form-item>
      <a-form-item field="section" label="模型图片">
        <a-space direction="vertical" :style="{ width: '100%' }">
          <a-upload
            action="/"
            :fileList="file ? [file] : []"
            :show-file-list="false"
            @change="onChange"
            @progress="onProgress"
          >
            <template #upload-button>
              <div
                :class="`arco-upload-list-item${
            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`"
              >
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="file && file.url"
                >
                  <img :src="file.url" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                  <a-progress
                    v-if="file.status === 'uploading' && file.percent < 100"
                    :percent="file.percent"
                    type="circle"
                    size="mini"
                    :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
                  />
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                    <div style="margin-top: 10px; font-weight: 600">上传</div>
                  </div>
                </div>
              </div>
            </template>
          </a-upload>
        </a-space>
      </a-form-item>
      <a-form-item field="name" label="基础Url">
        <a-input v-model="form.name" placeholder="请输入名称"/>
      </a-form-item>
      <a-form-item field="raptor" label="是否支持 Vision">
        <a-switch v-model="form.raptor" />
      </a-form-item>
  <div class="main-container">
    <div class="main-container-lf">
      <div style="padding: 10px;font-size: 16px;background:#eeeeee;">智能体配置</div>
      <div style="display: flex;width: 100%;" :style="{height:height}">
        <div style="width: 50%;height: 100%">
          <div style="padding: 10px;font-size: 12px;color: #2a2a2b;">智能体画像</div>
          <div>

      <a-form-item>
        <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>
          </div>

        </div>
      </a-form-item>
    </a-form>
        <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>
              <a-collapse-item header="开场引导" :key="'2'">

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

              </a-collapse-item>
              <a-collapse-item header="工具" key="4" disabled>
              </a-collapse-item>
              <a-collapse-item header="工作流" key="5" disabled>
              </a-collapse-item>
            </a-collapse>

            <a-form-item>
              <div style="position: absolute;right: 10px;top: 10px">
<!--                <a-button @click="visible = false">取消</a-button>-->
                <a-button style="margin-left: 10px" type="primary" html-type="submit">保存</a-button>
              </div>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
    <div class="main-container-rt">
      <div :style="{height:heightrg}">
        <div style="padding: 10px">
          <a-avatar :style="{ backgroundColor: '#3370ff' }">
            <img
              :style="{ width: '100%'}"
              alt="dessert"
              src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
            />
          </a-avatar>
          调试预览
        </div>
        <a-divider style="margin: 0;margin-left: 10px"/>

        <div class="bottom">
          <div class="input">
            <a-input  placeholder="输入您想了解的内容，按Enter发送">
              <template #suffix>
                <icon-send  style="cursor: pointer" />
              </template>
            </a-input></div>
          <div class="text">内容由AI生成，仅供参考</div>
        </div>
      </div>
    </div>
  </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { onMounted ,onBeforeMount, reactive, ref } from "vue";

import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue";
import { IconSend } from "@arco-design/web-vue/es/icon";
const props =  defineProps(['typeAngint','formData'])
const visible = ref(false);
const loading = ref(false);
const form = reactive({
  size: "medium",
  name: "",
  age: undefined,
  section: "0",
  province: "haidian",
  options: [],
  date: "",
  time: "",
  radio: "radio one",
  slider: 5,
  score: 5,
  switch: false,
  multiSelect: ["section one"],
  treeSelect: "",
  raptor: false,
  prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' +
    '      {cluster_content}\n' +
    '以上就是你需要总结的内容。',

});
const formRef = ref(null);
const height = ref('calc(100vh - 150px)')
const heightrg = ref('calc(100vh - 100px)')

const rules = {
  name: [
@@ -129,9 +109,16 @@
  console.log('values:', values, '\nerrors:', errors)
}

const handleClick = () => {
const handleClick = (data) => {
  visible.value = true;
  nextTick(()=>{
    Object.assign(form,data);
    console.log(form);
  })
};
defineExpose({
  handleClick
})
const handleBeforeOk = (done) => {
    formRef.value.validate().then(res => {
      console.log('form:', form)
@@ -148,12 +135,6 @@
}

const handleOpened =(el) => {
  Object.assign(form,{
    name: '',// 用户名
    nameJoin: '',// 昵称
    post: '',// 岗位
    txt: '',// 备注
  });
  formRef.value.resetFields();
}

@@ -178,11 +159,32 @@
})
</script>

<script lang="ts">
export default {
  name: 'add',
  methods: {

<style scoped lang="less">
.main-container {
  width: 100%;
  display: flex;
  .main-container-lf {
    width: 60%;
  }
};
</script>
  .main-container-rt {
    position: relative;
    width: 40%;
  }
}
.bottom{
  width: 100%;
  position: absolute;
  bottom: 40px;
  left:0;
  .input{
    margin-left: 20%;
    width: 60%;
  }
  .text{
    margin-left: 40%;
    font-size: 12px;
    color: lightgrey;
    line-height: 40px;
  }
}
</style>

 src/views/dmx/IntelligentAgent/index.vue

@@ -71,7 +71,7 @@
                    </div>
                    <div style="position: absolute; bottom: 1rem; right: 1rem;">
                      <a-space>
                        <editAgent></editAgent>
<!--                        <editAgent typeAngint="edit"></editAgent>-->
                        <a-popconfirm :content="'确定删除吗'" type="warning" @ok="deleteItem(record)">
                          <a-button  type="text" size="small">
                            <template #icon>

 src/views/dmx/knowledgeLib/index.vue

@@ -11,7 +11,7 @@
          <addKnow @knowledgeData="knowledgeData"></addKnow>
        </div>
        <div class="lf-container-down">
          <div class="tabs">
          <a-scrollbar style="height:56rem;overflow: auto;">
            <div
              class="tab"
              v-for="(tab, index) in tabs"
@@ -29,8 +29,8 @@
                </template>
              </a-popover>
            </div>
          </a-scrollbar>
          </div>
        </div>
      </div>
      <div class="rt-container">
        <a-tabs default-active-key="1">
@@ -794,16 +794,21 @@
        .lf-container-down{
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          width: 90%;
          height: 56rem;
          //height: 56rem;
          border: 1px solid #eeeeee;
          overflow: auto;
          padding: 10px;
          //padding: 10px;
          margin-bottom: 10px;
          .tabs .tab {
          //.tabs{
          //  width: 100%;
          //  height: 100%;
          //  overflow: auto;
          //}
          .tab {
            cursor: pointer;
            box-sizing: border-box;
            margin: 10px 0;
            margin: 10px 10px;
            padding:0 10px;
            color: rgba(0, 0, 0, 0.88);
            font-size: 14px;
@@ -815,12 +820,12 @@
            border: 1px solid #f0f0f0;
            border-radius: 8px;
          }
          .tabs .tab:hover {
          .tab:hover {
            border: 1px solid #ffffff;
            background: #e8e8ea;
            box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
          }
          .tabs .tab.active {
          .tab.active {
            border: 1px solid #e8e8ea;
            background: #e8e8ea;
            cursor: pointer;