feat: 允许查看历史响应结果

Kerwin · Kerwin · commit 1a392721bd0d · 2023-05-21T13:23:56.000+08:00
diff --git a/service/src/index.ts b/service/src/index.ts
@@ -135,7 +135,7 @@ router.post('/room-delete', auth, async (req, res) => {
   }
 })
 
-router.get('/chat-hisroty', auth, async (req, res) => {
+router.get('/chat-history', auth, async (req, res) => {
   try {
     const userId = req.headers.userId as string
     const roomId = +req.query.roomId
@@ -179,6 +179,7 @@ router.get('/chat-hisroty', auth, async (req, res) => {
           inversion: false,
           error: false,
           loading: false,
+          responseCount: (c.previousResponse?.length ?? 0) + 1,
           conversationOptions: {
             parentMessageId: c.options.messageId,
             conversationId: c.options.conversationId,
@@ -204,6 +205,66 @@ router.get('/chat-hisroty', auth, async (req, res) => {
   }
 })
 
+router.get('/chat-response-history', auth, async (req, res) => {
+  try {
+    const userId = req.headers.userId as string
+    const roomId = +req.query.roomId
+    const uuid = +req.query.uuid
+    const index = +req.query.index
+    if (!roomId || !await existsChatRoom(userId, roomId)) {
+      res.send({ status: 'Success', message: null, data: [] })
+      // res.send({ status: 'Fail', message: 'Unknow room', data: null })
+      return
+    }
+    const chat = await getChat(roomId, uuid)
+    if (chat.previousResponse === undefined || chat.previousResponse.length < index) {
+      res.send({ status: 'Fail', message: 'Error', data: [] })
+      return
+    }
+    const response = index >= chat.previousResponse.length
+      ? chat
+      : chat.previousResponse[index]
+    const usage = response.options.completion_tokens
+      ? {
+          completion_tokens: response.options.completion_tokens || null,
+          prompt_tokens: response.options.prompt_tokens || null,
+          total_tokens: response.options.total_tokens || null,
+          estimated: response.options.estimated || null,
+        }
+      : undefined
+    res.send({
+      status: 'Success',
+      message: null,
+      data: {
+        uuid: chat.uuid,
+        dateTime: new Date(chat.dateTime).toLocaleString(),
+        text: response.response,
+        inversion: false,
+        error: false,
+        loading: false,
+        responseCount: (chat.previousResponse?.length ?? 0) + 1,
+        conversationOptions: {
+          parentMessageId: response.options.messageId,
+          conversationId: response.options.conversationId,
+        },
+        requestOptions: {
+          prompt: chat.prompt,
+          parentMessageId: response.options.parentMessageId,
+          options: {
+            parentMessageId: response.options.messageId,
+            conversationId: response.options.conversationId,
+          },
+        },
+        usage,
+      },
+    })
+  }
+  catch (error) {
+    console.error(error)
+    res.send({ status: 'Fail', message: 'Load error', data: null })
+  }
+})
+
 router.post('/chat-delete', auth, async (req, res) => {
   try {
     const userId = req.headers.userId as string
@@ -296,9 +357,10 @@ router.post('/chat-process', [auth, limiter], async (req, res) => {
   let { roomId, uuid, regenerate, prompt, options = {}, systemMessage, temperature, top_p } = req.body as RequestProps
   const userId = req.headers.userId as string
   const room = await getChatRoom(userId, roomId)
+  if (room == null)
+    global.console.error(`Unable to get chat room \t ${userId}\t ${roomId}`)
   if (room != null && isNotEmptyString(room.prompt))
     systemMessage = room.prompt
-
   let lastResponse
   let result
   let message: ChatInfo
diff --git a/service/src/storage/model.ts b/service/src/storage/model.ts
@@ -51,9 +51,9 @@ export class ChatOptions {
   parentMessageId?: string
   messageId?: string
   conversationId?: string
-  promptTokens?: number
-  completionTokens?: number
-  totalTokens?: number
+  prompt_tokens?: number
+  completion_tokens?: number
+  total_tokens?: number
   estimated?: boolean
   constructor(parentMessageId?: string, messageId?: string, conversationId?: string) {
     this.parentMessageId = parentMessageId
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -59,6 +59,13 @@ export function fetchChatAPIProcess<T = any>(
   })
 }
 
+export function fetchChatResponseoHistory<T = any>(roomId: number, uuid: number, index: number) {
+  return get<T>({
+    url: '/chat-response-history',
+    data: { roomId, uuid, index },
+  })
+}
+
 export function fetchSession<T>() {
   return post<T>({
     url: '/session',
@@ -150,7 +157,7 @@ export function fetchDeleteChatRoom<T = any>(roomId: number) {
 
 export function fetchGetChatHistory<T = any>(roomId: number, lastId?: number) {
   return get<T>({
-    url: `/chat-hisroty?roomId=${roomId}&lastId=${lastId}`,
+    url: `/chat-history?roomId=${roomId}&lastId=${lastId}`,
   })
 }
 
diff --git a/src/typings/chat.d.ts b/src/typings/chat.d.ts
@@ -5,6 +5,7 @@ declare namespace Chat {
     dateTime: string
     text: string
     inversion?: boolean
+    responseCount?: number
     error?: boolean
     loading?: boolean
     conversationOptions?: ConversationRequest | null
diff --git a/src/views/chat/components/Message/index.vue b/src/views/chat/components/Message/index.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import { computed, ref } from 'vue'
-import { NDropdown, NPopover, useMessage } from 'naive-ui'
+import { NButtonGroup, NDropdown, NPopover, NSpace, useMessage } from 'naive-ui'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
 import { SvgIcon } from '@/components/common'
@@ -15,23 +15,24 @@ interface Props {
   inversion?: boolean
   error?: boolean
   loading?: boolean
+  responseCount?: number
   usage?: {
     completion_tokens: number
     prompt_tokens: number
     total_tokens: number
     estimated: boolean
   }
 }
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
 
 interface Emit {
   (ev: 'regenerate'): void
   (ev: 'delete'): void
+  (ev: 'responseHistory', historyIndex: number): void
 }
 
-const props = defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
 const { isMobile } = useBasicLayout()
 
 const { iconRender } = useIconRender()
@@ -44,6 +45,9 @@ const asRawText = ref(props.inversion)
 
 const messageRef = ref<HTMLElement>()
 
+const indexRef = ref<number>(0)
+indexRef.value = props.responseCount ?? 0
+
 const url_openai_token = 'https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them'
 
 const options = computed(() => {
@@ -98,6 +102,13 @@ async function handleCopy() {
     message.error('复制失败')
   }
 }
+
+async function handlePreviousResponse(next: number) {
+  if (indexRef.value + next < 1 || indexRef.value + next > props.responseCount!)
+    return
+  indexRef.value += next
+  emit('responseHistory', indexRef.value - 1)
+}
 </script>
 
 <template>
@@ -114,26 +125,45 @@ async function handleCopy() {
     </div>
     <div class="overflow-hidden text-sm " :class="[inversion ? 'items-end' : 'items-start']">
       <p class="text-xs text-[#b4bbc4]" :class="[inversion ? 'text-right' : 'text-left']">
-        {{ new Date(dateTime as string).toLocaleString() }}
-        <template v-if="usage">
-          <NPopover trigger="hover">
-            <template #trigger>
-              <span>
-                <span>[</span>
-                <span>{{ usage.estimated ? '~' : '' }}</span>
-                <span>{{ usage.prompt_tokens }}+{{ usage.completion_tokens }}={{ usage.total_tokens }}</span>
-                <span>]</span>
+        <NSpace>
+          {{ new Date(dateTime as string).toLocaleString() }}
+          <NButtonGroup v-if="!inversion && responseCount && responseCount > 1">
+            <NButton
+              style="cursor: pointer;"
+              :disabled="indexRef === 1"
+              @click="handlePreviousResponse(-1)"
+            >
+              <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="5 -5 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6" /></svg>
+            </NButton>
+            <span class="text-xs text-[#b4bbc4]"> {{ indexRef }} / {{ responseCount }}</span>
+            <NButton
+              style="cursor: pointer;"
+              :disabled="indexRef === responseCount"
+              @click="handlePreviousResponse(1)"
+            >
+              <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="-5 -5 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6" /></svg>
+            </NButton>
+          </NButtonGroup>
+          <template v-if="usage">
+            <NPopover trigger="hover">
+              <template #trigger>
+                <span>
+                  <span>[</span>
+                  <span>{{ usage.estimated ? '~' : '' }}</span>
+                  <span>{{ usage.prompt_tokens }}+{{ usage.completion_tokens }}={{ usage.total_tokens }}</span>
+                  <span>]</span>
+                </span>
+              </template>
+              <span class="text-xs">
+                {{ usage.estimated ? t('chat.usageEstimate') : '' }}
+                {{ t('chat.usagePrompt') }} {{ usage.prompt_tokens }}
+                + {{ t('chat.usageResponse') }} {{ usage.completion_tokens }}
+                = {{ t('chat.usageTotal') }}<a :href="url_openai_token" target="_blank">(?)</a>
+                {{ usage.total_tokens }}
               </span>
-            </template>
-            <span class="text-xs">
-              {{ usage.estimated ? t('chat.usageEstimate') : '' }}
-              {{ t('chat.usagePrompt') }} {{ usage.prompt_tokens }}
-              + {{ t('chat.usageResponse') }} {{ usage.completion_tokens }}
-              = {{ t('chat.usageTotal') }}<a :href="url_openai_token" target="_blank">(?)</a>
-              {{ usage.total_tokens }}
-            </span>
-          </NPopover>
-        </template>
+            </NPopover>
+          </template>
+        </NSpace>
       </p>
       <div
         class="flex items-end gap-1 mt-2"
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
@@ -14,7 +14,7 @@ import HeaderComponent from './components/Header/index.vue'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useAuthStore, useChatStore, usePromptStore } from '@/store'
-import { fetchChatAPIProcess } from '@/api'
+import { fetchChatAPIProcess, fetchChatResponseoHistory } from '@/api'
 import { t } from '@/locales'
 import { debounce } from '@/utils/functions/debounce'
 import IconPrompt from '@/icons/Prompt.vue'
@@ -235,6 +235,8 @@ async function onRegenerate(index: number) {
   controller = new AbortController()
 
   const { requestOptions } = dataSources.value[index]
+  let responseCount = dataSources.value[index].responseCount || 1
+  responseCount++
 
   let message = requestOptions?.prompt ?? ''
 
@@ -252,6 +254,7 @@ async function onRegenerate(index: number) {
       dateTime: new Date().toLocaleString(),
       text: '',
       inversion: false,
+      responseCount,
       error: false,
       loading: true,
       conversationOptions: null,
@@ -294,6 +297,7 @@ async function onRegenerate(index: number) {
                 dateTime: new Date().toLocaleString(),
                 text: lastText + (data.text ?? ''),
                 inversion: false,
+                responseCount,
                 error: false,
                 loading: true,
                 conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
@@ -339,6 +343,7 @@ async function onRegenerate(index: number) {
         dateTime: new Date().toLocaleString(),
         text: errorMessage,
         inversion: false,
+        responseCount,
         error: true,
         loading: false,
         conversationOptions: null,
@@ -351,6 +356,25 @@ async function onRegenerate(index: number) {
   }
 }
 
+async function onResponseHistory(index: number, historyIndex: number) {
+  const chat = (await fetchChatResponseoHistory(+uuid, dataSources.value[index].uuid || Date.now(), historyIndex)).data
+  updateChat(
+    +uuid,
+    index,
+    {
+      dateTime: chat.dateTime,
+      text: chat.text,
+      inversion: false,
+      responseCount: chat.responseCount,
+      error: true,
+      loading: false,
+      conversationOptions: chat.conversationOptions,
+      requestOptions: { prompt: chat.requestOptions.prompt, options: { ...chat.requestOptions.options } },
+      usage: chat.usage,
+    },
+  )
+}
+
 function handleExport() {
   if (loading.value)
     return
@@ -578,11 +602,13 @@ onUnmounted(() => {
                   :date-time="item.dateTime"
                   :text="item.text"
                   :inversion="item.inversion"
+                  :response-count="item.responseCount"
                   :usage="item && item.usage || undefined"
                   :error="item.error"
                   :loading="item.loading"
                   @regenerate="onRegenerate(index)"
                   @delete="handleDelete(index)"
+                  @response-history="(ev) => onResponseHistory(index, ev)"
                 />
                 <div class="sticky bottom-0 left-0 flex justify-center">
                   <NButton v-if="loading" type="warning" @click="handleStop">
