smartai2dian0/src/views/ConversationQA.vue

<template>
  <LayoutExperience>
    <ContentContainer>
      <ChatAsideMenu />

      <template v-if="query_value_status === 2">
        <ConversationChatContainer
          :agent_id="chat_agent"
          :CHAT_AGENT_INFOMATION="CHAT_AGENT_INFOMATION"
          :session_id="chat_session"
          :key="chat_agent"
        />
      </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">返回</a-button>
            </a-space>
          </template>
        </a-result>
      </template>
    </ContentContainer>
  </LayoutExperience>
</template>

<script setup>
import { ref, onMounted } 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';

/**
 * 此页面为对话页面
 * 用户可能从如下几个地方进入对话页面：
 * 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('');

/**
 * 对话使用到的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();
};

/**
 * 检查是否存在合法的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 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_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 = getConfigField('DEFAULT_CHAT_AGENT_ID');
  }
  if (!default_agent_id) {
    // 如果ID依然不生效，则需要请求api
    // TODO: 请求API
  }

  return default_agent_id;
}

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

  chat_agent.value = agent_id;
}

onBeforeRouteUpdate(async (to, from) => {
  // console.log(to, from);
  // // 路由发生了变化
  if (to.path === '/chat' || to.path === '/chat/qa') {
    const default_agent_id = await getDefaultAgentId();

    if (!to.query.agent) {
      chat_agent.value = default_agent_id;

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

onMounted(async () => {
  const query = route.query;

  const agent_id = query.agent;
  const session_id = query.session;

  if (!agent_id) {
    // 不存在参数
    // ------------------------------------------------------
    // ------------------------------------------------------
    // ------------------------------------------------------
    // ------------------------------------------------------
    // 使用默认的通用agent创建对话
    /**
     * 如果没有agent参数，则使用默认的agent
     * 默认的agent，和赵秦刚沟通，为知识问答（2024-12-18）
     * 下列为知识问答的ID
     */
    const default_agent_id = await getDefaultAgentId();

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