smartai2dian0/src/views/ConversationQA.vue

<template>
  <LayoutExperience>
    <ContentContainer :containerStyle="containerStyle">
      <ChatAsideMenu @openWelcome="openWelcome" @toNewChat="newChat" />

      <template v-if="query_value_status === 2">
        <ConversationChatContainer
          ref="conversation_chat_container"
          :agent_id="chat_agent"
          :CHAT_AGENT_INFOMATION="CHAT_AGENT_INFOMATION"
          :session_id="chat_session"
          :chat_history="chat_history"
          :key="chat_key"
          :conversation_params="conversation_params"
          @updateSessionId="updateSessionId"
        />
      </template>

      <template v-if="query_value_status === 3">
        <a-result status="error" :title="query_value_message">
          <template #extra>
            <a-space>
              <a-button type="primary" @click="handleBack">{{ $t('conversation.back') }}</a-button>
            </a-space>
          </template>
        </a-result>
      </template>
    </ContentContainer>
  </LayoutExperience>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUpdate, watch } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import LayoutExperience from './layout/LayoutExperience.vue';
import ContentContainer from './layout/ContentContainer.vue';

import ChatAsideMenu from './conversation/ChatAsideMenu.vue';

import ConversationChatContainer from './conversation/ConversationChatContainer.vue';

import { useAllAgentStore } from '../base/store/use-all-agents';
import getChatAgentInfomation from '../modules/conversation-board/get-chat-agent-infomation';

import { getConfigField } from '../config/index';

import useConversationChatParameters from '../modules/conversation-chat/use-conversation-chat-parameters';

// 对话配置信息接口数据
const { getConversationParams, api_status, api_message, conversation_params } = useConversationChatParameters();
/**
 * 此页面为对话页面
 * 用户可能从如下几个地方进入对话页面：
 * 1. 从对话历史记录，点击某个记录，进入对话页面，查看此记录的对话内容，此时，路由会存在两个参数
 *    agent 历史记录对应的agent ID
 *    session 历史记录的ID
 * 2. 从对话智能体大全页面，点击某个智能体，进入对话页面，新建该智能体对应的对话，此时，路由会有一个参数
 *    agent 对应的agent ID
 * 此页面大致流程如下：
 * 1. 检查参数是否合法
 *    A. 检查是否存在必须参数 agent
 *    B. 如果agent参数存在，则检查agent值是否在缓存中存在，如果不存在，则意味着有人在地址栏修改参数值，无效的agent值于对话没有意义，故，直接做报错处理
 * 2. 在参数合法的情况下，进入对话流程
 *
 * 根据必须参数 agent ID，可能会存在如下相关的操作：
 * 1. 此agent对应的主题背景
 * 2. 此agent可用、不可用的功能设定
 */

const route = useRoute();
const router = useRouter();

const allAgent = useAllAgentStore();

const chat_agent = ref('');
const chat_session = ref('');
const chat_history = ref('');

const conversation_chat_container = ref(null);

/**
 * 对话区域的唯一ID
 * 智能体的ID + 当前路由地址
 */
const chat_key = ref(chat_agent.value + window.location.href);

watch(route, (to) => {
  chat_key.value = chat_agent.value + window.location.href;
});

/**
 * 对话使用到的agent信息
 * agent属性是由接口返回的数据
 * config属性是客户端自定义的数据，针对特定的agent的一些个性化配置，可由此进行配置
 * 二者结合，形成对话组件所需要的一些参数
 */
const CHAT_AGENT_INFOMATION = ref({
  agent: {},
  config: {}
});

const query_value_status = ref(1); // 1 初始化状态 2 合法有效 3 非法无效，报错
const query_value_message = ref('');

const handleBack = () => {
  router.back();
};

const containerStyle = {
  paddingLeft: 0,
  paddingRight: 0
};

/**
 * 检查是否存在合法的agent参数值
 * @param agent_id
 */
async function isValidAgent(agent_id) {
  if (!agent_id) {
    return false;
  }

  // 检查缓存数据中是否存在此agent id值
  const agent_list = allAgent.getList();

  if (agent_list.length === 0) {
    // 通过接口获取所有的agent数据
    // TOOD: 如果agent_list为空，则意味着内存和本地存储中都没有记录，则需要通过接口获取agent列表数据
    return true;
  } else {
    const has_cache = agent_list.find((item) => item.id === agent_id);

    if (!has_cache) {
      // 缓存数据中不存在此ID值，非法的操作
      // 可能是有人通过地址栏修改参数值
      return false;
    }

    return true;
  }
}

/**
 * 获取默认的对话ID
 */
async function getDefaultAgentId() {
  let default_agent_id = null;

  // 获取默认智能体信息
  const default_id = getConfigField('DEFAULT_CHAT_AGENT_ID');
  const default_name = getConfigField('DEFAULT_CHAT_AGENT_NAME');

  // const agent_list = allAgent.getList();
  // const len = agent_list.length;

  // if (len > 1) {
  //   for (let i = 0; i < len; i++) {
  //     const item = agent_list[i];
  //     if (item.name === default_name) {
  //       default_agent_id = item.id;
  //       break;
  //     }
  //   }
  //   if (!default_agent_id) {
  //     // 未搜索到: 使用第一个
  //     default_agent_id = agent_list[0].id;
  //   }
  // } else if (len === 1) {
  //   // 仅有一个
  //   default_agent_id = agent_list[0].id;
  // } else {
  //   // 为0: 使用配置的ID
  //   default_agent_id = default_id;
  // }
  // if (!default_agent_id) {
  //   // 如果ID依然不生效，则需要请求api
  //   // TODO: 请求API
  // }

  return default_agent_id;
}

/**
 * agent id已经确认
 * @param agent_id
 */
function comfirmAgent(agent_id) {
  if (!agent_id) {
    // 根据agent_id 查询到动态表单数据
    getConversationParams(undefined);
  }
  /**
   * 根据agent_id 查询到agent的基本信息
   * 从而确定agent的相关功能支持，例如：是否需要上传文件，支持上传什么类型的文件、支持上传多少个文件？
   * 例如：主题、背景、等等
   */
  CHAT_AGENT_INFOMATION.value = getChatAgentInfomation(agent_id);

  chat_agent.value = agent_id;

  // 根据agent_id 查询到动态表单数据
  getConversationParams(chat_agent.value);
}
const updateSessionId = (session_id) => {
  chat_session.value = session_id;
};

const openWelcome = () => {
  if (conversation_chat_container.value) {
    conversation_chat_container.value.toShowWelcome();
  }
};

const newChat = async () => {
  await init();
  if (conversation_chat_container.value) {
    conversation_chat_container.value.toNewChat();
  }
};
watch(
  () => route,
  (val) => {
    console.log(route);
    if (route.query.chat) {
      chat_history.value = '';
      newChat();
    }

    chat_history.value = route.query.history || '';
  },
  {
    deep: true,
    immediate: true
  }
);
async function init() {
  const route = useRoute();

  const query = route?.query;
  let agent_id, session_id;
  if (query && query.agent) {
    agent_id = query.agent;
  }
  if (query && query.session) {
    session_id = query.session;
  }

  if (!agent_id) {
    query_value_status.value = 2;
    query_value_message.value = 'success';
    // 路由中不存在智能体ID参数
    // 获取到默认的智能体ID
    const default_agent_id = await getDefaultAgentId();
    // // 将路由重置为包含agent参数的地址
    // router.replace({
    //   path: '/chat/qa',
    //   query: {
    //     agent: default_agent_id
    //   }
    // });
    chat_agent.value = default_agent_id;
    comfirmAgent(default_agent_id);
    // // ------------------------------------------------------
    // // ------------------------------------------------------
    // // ------------------------------------------------------
    // // ------------------------------------------------------
    // query_value_status.value = 2;
    // query_value_message.value = 'success';
  } else {
    // 有agent参数
    // 判断已经缓存的agent列表是否存在

    const is_valid = await isValidAgent(agent_id);

    if (!is_valid) {
      // 不存在参数
      query_value_status.value = 3;
      query_value_message.value = '非法操作：参数异常';

      return;
    }

    // chat_agent.value = agent_id;
    chat_session.value = session_id;
    // // 如果存在history_id则获取历史会话内容

    // /**
    //  * 根据agent_id 查询到agent的基本信息
    //  * 从而确定agent的相关功能支持，例如：是否需要上传文件，支持上传什么类型的文件、支持上传多少个文件？
    //  * 例如：主题、背景、等等
    //  */
    // CHAT_AGENT_INFOMATION.value = getChatAgentInfomation(agent_id);
    comfirmAgent(agent_id);

    query_value_status.value = 2;
    query_value_message.value = 'success';
  }
  chat_session.value = session_id;
}

/**
 * 处理路由变化
 * 监听路由参数的变化
 */
onBeforeRouteUpdate(async (to, from) => {
  console.log(to.query);
  if (to.path === '/chat' || to.path === '/chat/qa') {
    if (!to.query.session) {
      chat_session.value = null;
    }

    // if (!to.query.agent) {
    //   const default_agent_id = await getDefaultAgentId();

    //   chat_agent.value = default_agent_id;
    //   console.log(default_agent_id);

    //   router.replace({
    //     path: '/chat/qa',
    //     query: {
    //       agent: default_agent_id
    //     }
    //   });
    // }
  }
});

onMounted(async () => {
  await init();
});

onBeforeUpdate(async () => {
  await init();
});
</script>
<style scoped>
.icon-btn {
  position: absolute;
}
</style>