历史会话页面开发

liudong

2024-08-16 189c2393466806e34639750ee168a946692c596f

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

@@ -19,53 +19,27 @@
    title-align="start"
    fullscreen
  >
    <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-textarea
                v-model="system"
                placeholder=""
                disabled
                style="height: 400px; background: #ffffff; color: #666666"
              />
            </div>
  <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>
          <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">

        </div>
        <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'"
                      v-model="form.llm_id"
                      :style="{ width: '25rem' }"
                      placeholder="请选择 ..."
                    >
                    <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"
@@ -74,6 +48,7 @@
                        <a-option
                          v-for="obj in item"
                          :key="obj.fid"
                          :disabled="!obj.available"
                          :value="obj.llm_id"
                        >
                          {{ obj.llm_name }}
@@ -81,23 +56,26 @@
                      </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-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-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-select>
                      <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>
@@ -128,29 +106,7 @@
        </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>
        <sessionAction></sessionAction>
      </div>
    </div>
  </a-modal>
@@ -163,6 +119,8 @@
  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);
@@ -182,7 +140,8 @@
        '你的任务是 XX ，需要按照以下步骤执行：\n' +
        '1. XX\n' +
        '2. XX\n' +
        '3. …\n',
        '3. …\n' +
        '{knowlege}',
      parameters: [
        {
          key: 'knowledge',
@@ -190,7 +149,7 @@
        },
      ],
    },
    kb_ids: ['985eda244efc11ef9a7a0242ac120006'],
    kb_ids: [],
    llm_id: 'qwen-plus',
    llm_setting: {
      temperature: 0.1,
@@ -210,7 +169,6 @@
  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: [
@@ -219,29 +177,42 @@
        message: '名称不允许为空',
      },
    ],
    llm_id: [
      {
        required: true,
        message: '模型不能为空',
      },
    ],
    kb_ids: [
      {
        required: true,
        message: '知识库不能为空',
      },
    ],
  };

  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();
    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');
      }
    }
  };

  const editClick = (data) => {
    visible.value = true;

    console.log(props.formData);
    Object.assign(form, props.formData);
    console.log(form);
@@ -252,8 +223,11 @@
    visible.value = true;
    nextTick(() => {
      Object.assign(form, data);
      console.log(form);
      console.log(form,'传值');
      system.value = form.prompt_config.system;
      if(tabs.value && tabs.value.length>0){
        form.kb_ids = [tabs.value[0].id];
      }
    });
  };
  defineExpose({
@@ -280,7 +254,7 @@
  const queryModel = async (params) => {
    try {
      const data = await queryModelList(params);
      console.log(data.data, '大模型列表');
      // console.log(data.data, '大模型列表');
      modelList.value = data.data;
    } catch (err) {
      // you can report use errorHandler or other
@@ -304,8 +278,10 @@
    try {
      const { data } = await queryKbList(params);
      console.log(data, 'data');
      tabs.value = data;
      console.log(tabs.value, 'tabs');
      nextTick(() => {
        tabs.value = data;
        console.log(tabs.value, 'tabs');
      });
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
@@ -348,4 +324,8 @@
      line-height: 40px;
    }
  }
  :deep(.arco-textarea-wrapper.arco-textarea-disabled){
      background: var(--color-bg-2);
      color: var(--color-text-1);
  }
</style>