feat: 上限文联想改为前端进行

src/api/index.ts

@@ -1,9 +1,12 @@
 import { post } from '@/utils/request'
 
-export function fetchChatAPI<T = any>(prompt: string) {
+export function fetchChatAPI<T = any>(
+  prompt: string,
+  options?: { conversationId?: string; parentMessageId?: string },
+) {
   return post<T>({
     url: '/chat',
-    data: { prompt },
+    data: { prompt, options },
   })
 }
 

src/components/business/Chat/index.vue

@@ -1,51 +1,27 @@
 <script setup lang='ts'>
-import { nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import { NButton, NInput, useMessage } from 'naive-ui'
+import type { ChatOptions, ChatProps } from './types'
 import { Message } from './components'
 import { Layout } from './layout'
-import { clearConversations, fetchChatAPI } from '@/api'
+import { fetchChatAPI } from '@/api'
 import { HoverButton, SvgIcon } from '@/components/common'
 
-interface ListProps {
-  dateTime: string
-  message: string
-  reversal?: boolean
-  error?: boolean
-}
-
 const scrollRef = ref<HTMLDivElement>()
 
 const ms = useMessage()
 
 const prompt = ref('')
-
 const loading = ref(false)
 
-const list = ref<ListProps[]>([])
-
-onMounted(initChat)
+const list = ref<ChatProps[]>([])
+const chatList = computed(() => list.value.filter(item => (!item.reversal && !item.error)))
 
 function initChat() {
-  addMessage('Hi, I am ChatGPT, a chatbot based on GPT-3.', false)
+  addMessage('Hi, I am ChatGPT, a chatbot based on GPT-3.')
 }
 
-async function handleClear() {
-  try {
-    await clearConversations()
-  }
-  catch (error) {
-    ms.error('Clear failed, please try again later.')
-  }
-  finally {
-    list.value = []
-    setTimeout(initChat, 100)
-  }
-}
-
-function handleEnter(event: KeyboardEvent) {
-  if (event.key === 'Enter')
-    handleSubmit()
-}
+onMounted(initChat)
 
 async function handleSubmit() {
   if (loading.value)
@@ -58,26 +34,51 @@ async function handleSubmit() {
     return
   }
 
-  addMessage(message, true)
+  addMessage(message, { reversal: true })
   prompt.value = ''
 
+  let options: ChatOptions = {}
+  const lastContext = chatList.value[chatList.value.length - 1]?.options
+
+  if (lastContext)
+    options = { ...lastContext }
+
   try {
     loading.value = true
-    const { data } = await fetchChatAPI(message)
-    addMessage(data?.text ?? '', false)
+    const { data } = await fetchChatAPI(message, options)
+    addMessage(data?.text ?? '', { options: { conversationId: data.conversationId, parentMessageId: data.id } })
   }
   catch (error: any) {
-    addMessage(`Error: ${error.message ?? 'Request failed, please try again later.'}`, false, true)
+    addMessage(`Error: ${error.message ?? 'Request failed, please try again later.'}`, { error: true })
   }
   finally {
     loading.value = false
   }
 }
 
-function addMessage(message: string, reversal = false, error = false) {
-  list.value.push({ dateTime: new Date().toLocaleString(), message, reversal, error })
+function handleEnter(event: KeyboardEvent) {
+  if (event.key === 'Enter')
+    handleSubmit()
+}
+
+function addMessage(
+  message: string,
+  args?: { reversal?: boolean; error?: boolean; options?: ChatOptions },
+) {
+  list.value.push({
+    dateTime: new Date().toLocaleString(),
+    message,
+    reversal: args?.reversal ?? false,
+    error: args?.error ?? false,
+    options: args?.options ?? undefined,
+  })
   nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
 }
+
+function handleClear() {
+  list.value = []
+  setTimeout(initChat, 100)
+}
 </script>
 
 <template>
@@ -87,12 +88,8 @@ function addMessage(message: string, reversal = false, error = false) {
         <div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
           <div>
             <Message
-              v-for="(item, index) of list"
-              :key="index"
-              :date-time="item.dateTime"
-              :message="item.message"
-              :reversal="item.reversal"
-              :error="item.error"
+              v-for="(item, index) of list" :key="index" :date-time="item.dateTime" :message="item.message"
+              :reversal="item.reversal" :error="item.error"
             />
           </div>
         </div>

src/components/business/Chat/types.ts

@@ -0,0 +1,12 @@
+export interface ChatOptions {
+  conversationId?: string
+  parentMessageId?: string
+}
+
+export interface ChatProps {
+  dateTime: string
+  message: string
+  reversal?: boolean
+  error?: boolean
+  options?: ChatOptions
+}