新版UI对话页面开发

liudong

2024-08-16 e4dbf13e917784f0e690709e2dd405e7475a86a1

 src/views/sessionManager/components/agentSession.vue

@@ -2,7 +2,7 @@
  <!--      内容-->
  <a-scrollbar
    ref="scrollbar"
    id="home"
    id="agentHome"
    class="chat-list"
    style="
              width: 90%;
@@ -99,21 +99,22 @@
</template>

<script setup lang="ts">
import { defineProps, ref, watch, defineEmits, onMounted, reactive, computed } from "vue";
import { defineProps, ref, watch, defineEmits, onMounted, reactive, computed, nextTick } from "vue";
import { Message } from '@arco-design/web-vue';
import { useAppStore } from "@/store";
import { getAuthorization } from "@/utils/auth";
import { EventSourceParserStream } from 'eventsource-parser/stream';
// const props = defineProps({
//   modalObj: Object,
//   dialogId: String,
// });
import { agentResetApi, agentSetApi, getAgentSessionDetailsApi } from "@/api/agentSession";
import EventBus from '@/utils/EventBus';
const props = defineProps({
  modalObj: Object,
});

// const emit = defineEmits(['addSession']);

const sessionDetailList = ref([]); //根据会话id出来的会话详情
const sessionList = ref([]); //会话列表
const modalObj = reactive({ add: false });
const modalObj = reactive({ });
const dialogId = ref('');
const chatDis = ref(false);
const loading = ref(false);
@@ -126,8 +127,7 @@
const inputMsg = ref('');
const activeSessionId = ref('');
const fieldNames = { value: 'id', label: 'name' };
const dialogs = ref([]);
const dialogObj = reactive({});
const agentObj = reactive({});
const agentList = ref([]);
const selectValue = ref('');
const sectionList = ref({});
@@ -136,6 +136,109 @@
const theme = computed(() => {
  return appStore.theme;
});



// 初始化页面
const initPage = async () => {
  agentSet();
  agentReset();
  agentCompletion();
  queryAgentSessionDetail(agentObj.id);
};

const createNewAgent = async (session) => {
  Object.assign(agentObj, session);
  initPage();


}



// 调用set方法
const agentSet = async () => {
  const res = await agentSetApi({
    id: agentObj.id,
    title: agentObj.title,
    dsl: agentObj.dsl,
  });
  console.log(res,'agentSet');
  if (res.code == 0) {
    // sessionDetailList.value = res.data.dsl.messages;
    // Message.success('修改成功');
  }
}
// 调用reset方法
const agentReset = async () => {
  const res = await agentResetApi({
    id: agentObj.id,
  });
  if (res.code === 200) {
    // Message.success('修改成功');
  }
}
// 调用completion方法
const agentCompletion = async () => {
  const response = await fetch(
    '/api/v1/canvas/completion',
    {
      method: 'POST',
      headers: {
        'Authorization': getAuthorization(),
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: agentObj.id
      }),
    }
  );

  const reader = response?.body
    ?.pipeThrough(new TextDecoderStream())
    .pipeThrough(new EventSourceParserStream())
    .getReader();
  currIndex.value = 0;
  // while (true) {
  //   const x = await reader?.read();
  //   if (x) {
  //     const { done, value } = x;
  //     console.log(x, 999);
  //     try {
  //       const val = JSON.parse(value?.data || '');
  //       const d = val?.data;
  //       if (typeof d !== 'boolean') {
  //         console.info('data:', d);
  //         streamStr.value = d.content;
  //         startDisplayStr();
  //       }
  //     } catch (e) {
  //       console.warn(e);
  //     }
  //     if (done) {
  //       console.info('done');
  //       displayedText.value = '';
  //       queryAgentSessionDetail(agentObj.id);
  //       break;
  //     }
  //   }
  // }
  chatDis.value = false;
  loading.value = false;
  inputMsg.value = '';
}
// 调用get方法

const queryAgentSessionDetail = async (id) => {
  const { code, data } = await getAgentSessionDetailsApi(id);
  if (code == 0) {
    console.log(data,'会话详情');
    sessionDetailList.value = data.dsl.messages;
    refreshScroll(); //刷新滚动条位置
  }
};





@@ -152,12 +255,12 @@

      chatDis.value = true;
      loading.value = true;
      if (!activeSessionId.value) {
        Message.warning('请选择会话');
        chatDis.value = false;
        loading.value = false;
        return;
      }
      // if (!agentObj.id) {
      //   Message.warning('请选择会话');
      //   chatDis.value = false;
      //   loading.value = false;
      //   return;
      // }

      // if (displayedText.value) {
      //   querySessionList();
@@ -171,7 +274,7 @@
        sessionDetailList.value.push({ role: 'last' });
        refreshScroll();
        const response = await fetch(
          '/api/tech/cloudminds/query?modeltype=localragflow',
          '/api/v1/canvas/completion',
          {
            method: 'POST',
            headers: {
@@ -179,8 +282,8 @@
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              conversation_id: activeSessionId.value,
              messages: inputMsg.value,
              id: agentObj.id,
              message: inputMsg.value,
            }),
          }
        );
@@ -209,7 +312,7 @@
            if (done) {
              console.info('done');
              displayedText.value = '';
              querySessionDetail(sectionList.value);
              queryAgentSessionDetail(agentObj.id);
              break;
            }
          }
@@ -232,16 +335,53 @@
};


onMounted(() => {

//文字动态输出
const startDisplayStr = () => {
  if (timer) {
    clearTimeout(timer!);
  }
  const res = streamStr.value;
  // 将数组中的字符串拼接起来
  if (currIndex.value < res.length) {
    displayedText.value += res[currIndex.value];
    currIndex.value++;
    setTimeout(startDisplayStr, 100);
    refreshScroll();
  } else {
    clearTimeout(timer!);
    timer = null;
  }
};

const scrollbar = ref(null);
const refreshScroll = () => {
  nextTick(() => {
    const container = document.getElementById('agentHome');
    scrollbar.value.scrollTop(container.scrollHeight);
  });
};


onMounted(() => {
  EventBus.on('createAgent', (data) => {
    createNewAgent(data);
  });
});

// watch(
//   () => props.dialogId,
//   (newVal, oldVal) => {
//
//   }
// );
watch(
  () => props.modalObj,
  (newVal, oldVal) => {
    // Object.assign(agentObj, newVal);
    //调用agent初始化方法
    if(JSON.stringify(newVal) != '{}'){
      // initPage();
    }
  },{
    immediate: true,
    deep: true
  }
);
</script>

<style scoped lang="scss">