支持模型对话消息分页

imiphp · Aug 30, 2023 · f4e08f5 · f4e08f5
1 parent 68488f1
commit f4e08f5
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 10 deletions.
diff --git a/server/Module/Embedding/ApiController/OpenAIController.php b/server/Module/Embedding/ApiController/OpenAIController.php
@@ -275,18 +275,25 @@ protected function task(): void
         Action,
         LoginRequired()
     ]
-    public function chatList(string $id, int $page = 1, int $limit = 15): array
+    public function chatList(string $id, string $lastMessageId = '', int $limit = 15): array
     {
         $memberSession = MemberUtil::getMemberSession();
 
-        $result = $this->openAIService->list($id, $memberSession->getIntMemberId(), $page, $limit);
+        $list = $this->openAIService->list($id, $memberSession->getIntMemberId(), $lastMessageId, $limit + 1);
         /** @var EmbeddingQa $item */
-        foreach ($result['list'] as $item)
+        foreach ($list as $item)
         {
             $item->__setSecureField(true);
         }
+        if ($hasNextPage = isset($list[$limit]))
+        {
+            unset($list[$limit]);
+        }
 
-        return $result;
+        return [
+            'list'        => $list,
+            'hasNextPage' => $hasNextPage,
+        ];
     }
 
     /**

diff --git a/server/Module/Embedding/Service/OpenAIService.php b/server/Module/Embedding/Service/OpenAIService.php
@@ -262,7 +262,7 @@ public function getByIdStr(string $id, int $memberId = 0): EmbeddingQa
         return $record;
     }
 
-    public function list(int|string $projectId = '', int $memberId = 0, int $page = 1, int $limit = 15): array
+    public function list(int|string $projectId = '', int $memberId = 0, string $lastId = '', int $limit = 15): array
     {
         $query = EmbeddingQa::query();
         if ($projectId)
@@ -277,10 +277,15 @@ public function list(int|string $projectId = '', int $memberId = 0, int $page =
         {
             $query->where('member_id', '=', $memberId);
         }
+        if ('' !== $lastId)
+        {
+            $query->where('id', '<', EmbeddingQa::decodeId($lastId));
+        }
 
         return $query->order('id', 'desc')
-                     ->paginate($page, $limit)
-                     ->toArray();
+                     ->limit($limit)
+                     ->select()
+                     ->getArray();
     }
 
     public function edit(string $id, string $title, int $memberId): void

diff --git a/web/src/api/embedding.ts b/web/src/api/embedding.ts
@@ -152,14 +152,14 @@ export async function getFile(
 
 export async function chatList(
   id: string,
-  page = 1,
+  lastMessageId = '',
   limit = 15,
 ) {
   const response = await get({
     url: '/embedding/openai/chatList',
     data: {
       id,
-      page,
+      lastMessageId,
       limit,
     },
   })

diff --git a/web/src/views/embedding/chat.vue b/web/src/views/embedding/chat.vue
@@ -70,6 +70,11 @@ const getContainerClass = computed(() => {
   ]
 })
 
+let lastMessageId = ''
+const messagePageSize = 15
+const messageNextPageLoading = ref(false)
+const hasMessageNextPage = ref(false)
+
 function handleUpdateCollapsed() {
   appStore.setSiderCollapsed(!collapsed.value)
 }
@@ -324,12 +329,65 @@ async function loadConfig() {
   embeddingSetting.value.prompt = response.data['config:embedding'].config.chatPrompt
 }
 
+async function handleMessageNextPage() {
+  if (!hasMessageNextPage.value)
+    return
+
+  messageNextPageLoading.value = true
+  try {
+    const response = await chatList(id, lastMessageId, messagePageSize)
+    for (const item of response.list) {
+      const resultItem: Chat.Chat = { ...item }
+      resultItem.inversion = item.role === 'user'
+      dataSources.value.unshift({
+        beginTime: item.createTime / 1000,
+        completeTime: item.completeTime / 1000,
+        message: item.answer,
+        inversion: false,
+        error: false,
+        loading: false,
+        conversationOptions: null,
+        tokens: item.tokens,
+      })
+      dataSources.value.unshift({
+        beginTime: item.createTime / 1000,
+        completeTime: item.createTime / 1000,
+        message: item.question,
+        inversion: true,
+        error: false,
+        loading: false,
+        conversationOptions: null,
+        tokens: item.tokens,
+      })
+      lastMessageId = item.recordId
+    }
+    hasMessageNextPage.value = response.hasNextPage
+    if (scrollRef.value)
+      scrollRef.value.scrollTop = 1
+  }
+  finally {
+    messageNextPageLoading.value = false
+  }
+}
+
 onMounted(async () => {
+  if (scrollRef.value) {
+    scrollRef.value.onscroll = () => {
+      if (messageNextPageLoading.value)
+        return
+
+      const { scrollTop } = (scrollRef.value as HTMLDivElement)
+      if (scrollTop <= 0)
+        handleMessageNextPage()
+    }
+  }
+
   let item
   try {
     showLoading.value = true
     await loadConfig()
-    const [projectResponse, chatListPromiseResponse] = await Promise.all([getProject(id), chatList(id, 1, 99999)])
+    lastMessageId = ''
+    const [projectResponse, chatListPromiseResponse] = await Promise.all([getProject(id), chatList(id, lastMessageId, messagePageSize)])
     embeddingState.$state.currentProject = projectResponse.data
     runtimeStore.$state.headerTitle = projectResponse.data.name
     const _dataSources: Array<Chat.Chat> = []
@@ -355,8 +413,10 @@ onMounted(async () => {
         conversationOptions: null,
         tokens: item.tokens,
       }
+      hasMessageNextPage.value = chatListPromiseResponse.hasNextPage
       _dataSources.push(currentChatReply.value)
       qaId = item.recordId
+      lastMessageId = item.recordId
     }
     setting.value = { ...setting.value, ...projectResponse.data.chatConfig }
     if (item) {
@@ -442,6 +502,11 @@ onMounted(async () => {
           <div class="flex flex-col w-full h-full">
             <main class="flex-1 overflow-hidden">
               <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
+                <div v-if="hasMessageNextPage" class="mb-2">
+                  <NButton block :loading="messageNextPageLoading" @click="handleMessageNextPage">
+                    加载更多...
+                  </NButton>
+                </div>
                 <div
                   id="image-wrapper"
                   class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"