历史会话页面开发

liudong

2024-08-16 189c2393466806e34639750ee168a946692c596f

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

@@ -1,188 +1,331 @@

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

  <a-modal v-model:visible="visible" title="添加模式"
           @before-open="handleOpened"
           @cancel="handleCancel"
           :footer="false"
           title-align="start"
           width="600px"
  <!--  <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"
    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: var(--color-neutral-3);">智能体配置</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-textarea v-model="system" placeholder="" disabled style="height: 400px;"  />
          </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>
      </a-form-item>
    </a-form>
        <div style="width: 50%;border: 1px solid var(--color-neutral-3);background:  var(--color-neutral-3)">
          <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-form-item field="llm_id" label="模型">
                  <a-space direction="vertical" size="large">
                    <a-select :size="'large'" field="llm_id" 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"
                          :disabled="!obj.available"
                          :value="obj.llm_id"
                        >
                          {{ obj.llm_name }}
                        </a-option>
                      </a-optgroup>
                    </a-select>
                  </a-space>
                </a-form-item>
                </a-collapse-item>
                <a-collapse-item header="开场引导" :key="'2'" disabled>
                </a-collapse-item>
                <a-collapse-item  header="知识库" key="3">
                  <a-form-item field="kb_ids" label="知识库">
                    <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-form-item>
                </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: 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>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>
      <div class="main-container-rt">
        <sessionAction></sessionAction>
      </div>
    </div>
  </a-modal>
</template>

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

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 rules = {
  name: [
    {
      required: true,
      message:'名称不允许为空',
  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';
  import EventBus from "@/utils/EventBus";
  import sessionAction  from "@/views/dmx/IntelligentAgent/components/sessionAction.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' +
        '{knowlege}',
      parameters: [
        {
          key: 'knowledge',
          optional: false,
        },
      ],
    },
  ],
}


const handleSubmit = ({values, errors}) => {
  console.log('values:', values, '\nerrors:', errors)
}

const handleClick = () => {
  visible.value = true;
};
const handleBeforeOk = (done) => {
    formRef.value.validate().then(res => {
      console.log('form:', form)
      if (!form.name) {
        done(false)
      }else {
        console.log('请求数据');

      }
    })
};
const handleCancel = () => {
  visible.value = false;
}

const handleOpened =(el) => {
  Object.assign(form,{
    name: '',// 用户名
    nameJoin: '',// 昵称
    post: '',// 岗位
    txt: '',// 备注
    kb_ids: [],
    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,
  });
  formRef.value.resetFields();
}

const file = ref();

const onChange = (_, currentFile) => {
  file.value = {
    ...currentFile,
    // url: URL.createObjectURL(currentFile.file),
  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 emit = defineEmits(['cancelModal']);
  const rules = {
    name: [
      {
        required: true,
        message: '名称不允许为空',
      },
    ],
    llm_id: [
      {
        required: true,
        message: '模型不能为空',
      },
    ],
    kb_ids: [
      {
        required: true,
        message: '知识库不能为空',
      },
    ],
  };
};
const onProgress = (currentFile) => {
  file.value = currentFile;
};

onBeforeMount(()=>{
  const handleSubmit = async ({ values, errors }) => {
    // console.log('values:', values, '\nerrors:', errors)
    if(!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();
        EventBus.emit('queryList');
      }
    }
  };

})
onMounted(()=>{
  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;
      if(tabs.value && tabs.value.length>0){
        form.kb_ids = [tabs.value[0].id];
      }
    });
  };
  defineExpose({
    handleClick,
  });
  const handleBeforeOk = (done) => {
    formRef.value.validate().then((res) => {
      console.log('form:', form);
      if (!form.name) {
        done(false);
      } else {
        console.log('请求数据');
      }
    });
  };
  const handleCancel = () => {
    visible.value = false;
    emit('cancelModal');
  };

})
  const handleOpened = (el) => {
    // 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) => {
    file.value = {
      ...currentFile,
      // url: URL.createObjectURL(currentFile.file),
    };
  };
  const onProgress = (currentFile) => {
    file.value = currentFile;
  };

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

  onBeforeMount(() => {
    queryModel({});
    knowledgeData();
  });
  onMounted(() => {});
</script>

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

<style scoped lang="less">
  .main-container {
    width: 100%;
    display: flex;
    .main-container-lf {
      width: 60%;
    }
    .main-container-rt {
      position: relative;
      width: 40%;
    }
  }
};
</script>
  .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;
    }
  }
  :deep(.arco-textarea-wrapper.arco-textarea-disabled){
      background: var(--color-bg-2);
      color: var(--color-text-1);
  }
</style>