qn-ai-pc/src/views/conversation/index.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { Button } from 'ant-design-vue'
import { AppContainerBox } from '@/components/AppContainerBox'
import { AppSubMenuTitle } from '@/components/AppSubMenuTitle'
import { AppSubMenuList } from '@/components/AppSubMenuList'
import { AppConversationDefault } from '@/components/AppConversationDefault'
import type { SubMenuItem } from '@/components/AppSubMenuList/index.d'
import { AppTextarea } from '@/components/AppTextarea'
import { AppMessage } from '@/components/AppMessage'
import type { MessageItem } from '@/components/AppMessage/index.d'
import { useMessageStore } from '@/store/moules/messageStore/index'
import { MessageStatusEnum, MessageTypeEnum } from '@/enums/messageEnum'
import { conversationList, historyMessage, sendMessage } from '@/api/base/message'
import { useMqtt } from '@/hooks/useMqtt'

const messageStore = useMessageStore()

const sendBtnLoading = ref(false)
const subMenuActive = ref(0)
const subMenuList = ref<SubMenuItem[]>([])
const messageList = computed(() => messageStore.getMessageList)
const conversationData = computed(() => messageStore.getConversationData)
const historyMessageParams = ref({
  conversationId: conversationData.value ? conversationData.value.id : '',
  current: 1,
  size: 10,
  total: 0,
})

const conversationDefaultShow = ref(true)

function handleSubMenuChange(index: number) {
  subMenuActive.value = index
}

function handleSend(value: string) {
  console.log('handleSend', value)
  sendBtnLoading.value = true
  conversationDefaultShow.value = false
  messageStore.setMessageStatus(MessageStatusEnum.LOADING)
  messageStore.setMessageFirstItem({
    messageType: MessageTypeEnum.USER,
    content: value,
    time: String(new Date().getTime()),
    avatar: '',
  })
  messageStore.setMessageFirstItem({
    messageType: MessageTypeEnum.AI,
    content: '正在思考中...',
    time: String(new Date().getTime()),
    avatar: '',
    messageStatus: MessageStatusEnum.LOADING,
  })
  if (!messageStore.getConversationData) {
    return
  }
  sendMessage({
    roleId: messageStore.getConversationData.roleId,
    conversationId: messageStore.getConversationData.id,
    question: value,
  }).then(() => {

  }).catch(() => {
    messageStore.setMessageStatus(MessageStatusEnum.END)
  })
}

/**
 * @description: 获取会话列表
 */
async function getConversationList() {
  const res = await conversationList()
  subMenuList.value = res
  subMenuActive.value = 0
  if (subMenuList.value.length) {
    messageStore.setConversationData(subMenuList.value[subMenuActive.value])
    historyMessageParams.value.current = 1
    getHistoryMessage()

    await useMqtt().connect()
  }
}

/**
 * @description: 获取历史对话记录
 */
async function getHistoryMessage() {
  const res = await historyMessage(historyMessageParams.value)
  if (!res || !res.records || !res.records.length) {
    return
  }
  res.records.forEach((item: any) => {
    const itemData: MessageItem = {
      messageType: item.roleType === MessageTypeEnum.USER ? MessageTypeEnum.USER : MessageTypeEnum.AI,
      content: item.messageContent,
      time: item.messageTime,
      avatar: '',
      messageStatus: MessageStatusEnum.END,
    }
    historyMessageParams.value.total = res.total
    messageStore.setMessagePushItem(itemData)
  })
  conversationDefaultShow.value = false
}

onMounted(() => {
  getConversationList()
})
</script>

<template>
  <AppContainerBox>
    <template #subMenu>
      <!-- 标题 -->
      <AppSubMenuTitle></AppSubMenuTitle>

      <!-- 按钮 -->
      <div class="px-5 mb-5">
        <Button type="primary" class="w-full">
          新建会话
        </Button>
      </div>

      <!-- 会话列表 -->
      <AppSubMenuList
        :list="subMenuList"
        :active-index="subMenuActive"
        @change="handleSubMenuChange"
      >
      </AppSubMenuList>
    </template>
    <template #content>
      <!-- 默认导语 -->
      <AppConversationDefault
        v-if="conversationDefaultShow"
        height="calc(100% - 120px)"
      >
      </AppConversationDefault>

      <!-- 消息列表 -->
      <AppMessage v-else :list="messageList"></AppMessage>

      <!-- 发送框 -->
      <AppTextarea
        class="pl-52 pr-32 mt-10"
        :btn-loading="sendBtnLoading"
        @send="handleSend"
      ></AppTextarea>
    </template>
  </AppContainerBox>
</template>

<style scoped></style>