smartai2dian0/src/views/conversation/ConversationChatContainer.vue

<template>
  <div class="conversation-chat-container">
    <div class="conversation-chat-left">
      <DialogAsideLeft />
    </div>

    <div class="conversation-chat-main" ref="chat_main">
      <DialogHeader class="conversation-chat-header" :style="{ height: header_height + 'px' }" />

      <div class="conversation-chat-content">
        <DialogList
          class="conversation-chat-list"
          :height="list_height"
          :agent_id="agent_id"
          :list="chat_log_list"
          :suggestion="chat_suggestion"
          :show_welcome="show_welcome"
          @share="handleChatShare"
          @submit="handleSuggestSubmit"
        />

        <DialogInput
          class="conversation-chat-input"
          :style="{ height: input_height + 'px' }"
          :disabled="input_disabled"
          @inputTextChange="handleTextChange"
          @inputFileChange="handleFileChange"
          @submit="handleInputSubmit"
        />
      </div>

      <DialogFooter class="conversation-chat-footer" :style="{ height: footer_height + 'px' }" />
    </div>

    <div class="conversation-chat-right">
      <DialogAsideRight />
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted, computed } from 'vue';

import DialogAsideLeft from '../../modules/conversation-chat/DialogAsideLeft.vue';
import DialogHeader from '../../modules/conversation-chat/DialogHeader.vue';
import DialogList from '../../modules/conversation-chat/DialogList.vue';
import DialogInput from '../../modules/conversation-chat/DialogInput.vue';
import DialogFooter from '../../modules/conversation-chat/DialogFooter.vue';
import DialogAsideRight from '../../modules/conversation-chat/DialogAsideRight.vue';

import useEleSize from '../../utils/use-ele-size';

import useWebSocketChat from '../../modules/conversation-chat/use-websocket-chat';
import { jsonParse, jsonStringify } from '../../utils/utils';

/**
 * 1. 历史会话进入此页面，展示历史会话内容
 * 2. 点击智能体，新建会话
 */

const props = defineProps({
  /**
   * 智能体的ID
   * 此参数必须传递
   */
  agent_id: String,
  /**
   * 会话ID
   * 如果有此参数，则意味着获取该对话的记录内容
   */
  session_id: String,

  chat_type: String
});

const header_height = 30;
const footer_height = 30;
const input_height = 100;

const { width: chat_width, height: chat_height } = useEleSize('chat_main');

/**
 * 对话列表区域的高度
 */
const list_height = computed(() => {
  return chat_height.value - header_height - footer_height - input_height;
});

// ------------------------------------------------------------------
// ------------------------------------------------------------------
// ------------------------------------------------------------------

/**
 * 对话数据列表
 */
const chat_log_list = ref([]);
const chat_suggestion = ref({});

/**
 * 是否显示欢迎页
 * 当用户进入对话页面，还未正式开始对话时
 * 对话区域会显示欢迎内容
 * 当用户开始对话时，欢迎内容消失，对话列表开始展示
 */
const show_welcome = ref(false);

/**
 * 分享
 * @param chat_id
 */
const handleChatShare = (chat_id) => {};
/**
 * 在聊天界面点击推荐项
 * 继续对话
 */
const handleSuggestSubmit = (suggest) => {};

// ---------------------------------------------

/**
 * 输入区域数据控制
 */
const input_text = ref('');
const input_files = ref([]);

/**
 * 是否禁用输入组件
 */
const input_disabled = ref(false);

/**
 * 输入文本发生了变化
 * @param value
 */
const handleTextChange = (value) => {};
/**
 * 输入的文件发生了变化
 * @param files
 */
const handleFileChange = (files) => {};
/**
 * 输入已经确认要提交了
 * 1. 文件上传
 * 2. 创建会话
 *    get-chat-id
 *    连接socket
 * 3. socket 发送文本与文件数据内容
 * 4. 接收 socket 返回的数据项
 */
const handleInputSubmit = () => {
  /**
   * 创建会话 get chat id
   */

  /**
   * 上传文件，获取文件参数
   */

  /**
   * 组装socket参数
   * 发送websocket消息
   */

  const msg = jsonStringify({
    message: '消息内容'
  });

  handleWSSend(msg);
};

/**
 * ------------------------------------------------------------
 * websocket定义以及初始化
 */
const wsTrigger = {
  /**
   * 当websocket消息回来后
   * @param e
   */
  onMessage: handleWSMessage,
  /**
   * 当websocket消息出错时
   * @param e
   */
  onError: handleWSError,
  /**
   * 当websocket消息关闭时
   * @param e
   */
  onClose: handleWSClose
};

/**
 * 初始化websocket相关的一些方法
 */
const { initWSConnection, sendWSMessage, getWSInstance, closeWSConnect } = useWebSocketChat(wsTrigger);

/**
 * 发送websocket消息
 * @param chat_id - 对话记录的ID
 * @param value
 */
function handleWSSend(chat_id, value) {
  // 初始化websocket连接
  initWSConnection(props.agent_id, chat_id, props.chat_type);
  sendWSMessage(value);
}

/**
 * 接收websocket消息
 * @param e
 */
function handleWSMessage(e) {
  const res_data = e.data;
  const res_content = jsonParse(res_data);

  /**
   * 类别：
   * close
   * error
   * message
   * stream
   */
  const res_type = res_content.type;
  const res_message = res_content.message; // 消息内容
}

/**
 * 处理websocket错误
 * @param e
 */
function handleWSError(e) {}

/**
 * 处理websocket关闭事件
 * @param e
 */
function handleWSClose(e) {}

onMounted(() => {
  // 组件挂载
  if (props.session_id) {
    // 有历史记录：获取历史记录内容进行展示
  } else {
    // 无历史记录：等待创建会话内容，列表区域显示欢迎界面
  }
});

// ---------------------------------------------------------
onUnmounted(() => {
  // 组件卸载，关闭组件内的websocket连接
  closeWSConnect();
});
</script>

<style lang="css" scoped>
.conversation-chat-container {
  display: flex;
  justify-content: center;

  margin-left: auto;
  margin-right: auto;

  height: 100%;
}

.conversation-chat-left {
  width: 25%;
  flex-shrink: 0;
}
.conversation-chat-right {
  width: 25%;
  flex-shrink: 0;
}
.conversation-chat-main {
  flex-grow: 1;
  height: 100%;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  flex-direction: column;

  background-color: #aaa;
}
.conversation-chat-content {
  flex-grow: 1;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}
.conversation-chat-list {
  flex-grow: 1;
  overflow: auto;
}
.conversation-chat-input {
  height: 100px;
  background-color: #a67777;
  flex-shrink: 0;
}
</style>