feat: 对话增加历史记录功能(#206)

1Panel-dev · May 15, 2024 · a47d3ed · a47d3ed
1 parent 8983ff8
commit a47d3ed
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 35 deletions.
diff --git a/ui/src/components/common-list/index.vue b/ui/src/components/common-list/index.vue
@@ -1,19 +1,17 @@
 <template>
   <div class="common-list">
-    <el-scrollbar>
-      <ul v-if="data.length > 0">
-        <template v-for="(item, index) in data" :key="index">
-          <li
-            @click.prevent="clickHandle(item, index)"
-            :class="current === index ? 'active' : ''"
-            class="cursor"
-          >
-            <slot :row="item" :index="index"> </slot>
-          </li>
-        </template>
-      </ul>
-      <el-empty description="暂无数据" v-else />
-    </el-scrollbar>
+    <ul v-if="data.length > 0">
+      <template v-for="(item, index) in data" :key="index">
+        <li
+          @click.prevent="clickHandle(item, index)"
+          :class="current === index ? 'active' : ''"
+          class="cursor"
+        >
+          <slot :row="item" :index="index"> </slot>
+        </li>
+      </template>
+    </ul>
+    <el-empty description="暂无数据" v-else />
   </div>
 </template>
 <script setup lang="ts">

diff --git a/ui/src/stores/index.ts b/ui/src/stores/index.ts
@@ -9,6 +9,7 @@ import useModelStore from './modules/model'
 import useApplicationStore from './modules/application'
 import useDocumentStore from './modules/document'
 import useProblemStore from './modules/problem'
+import useLogStore from './modules/log'
 
 const useStore = () => ({
   common: useCommonStore(),
@@ -18,7 +19,8 @@ const useStore = () => ({
   model: useModelStore(),
   application: useApplicationStore(),
   document: useDocumentStore(),
-  problem: useProblemStore()
+  problem: useProblemStore(),
+  log: useLogStore()
 })
 
 export default useStore
diff --git a/ui/src/stores/modules/log.ts b/ui/src/stores/modules/log.ts
@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import logApi from '@/api/log'
+import { type Ref } from 'vue'
+import type { pageRequest } from '@/api/type/common'
+
+const useLogStore = defineStore({
+  id: 'log',
+  state: () => ({}),
+  actions: {
+    async asyncGetChatLog(id: string, page: pageRequest, param: any, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        logApi
+          .getChatLog(id, page, param, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    }
+  }
+})
+
+export default useLogStore
diff --git a/ui/src/stores/modules/paragraph.ts b/ui/src/stores/modules/paragraph.ts
@@ -29,7 +29,6 @@ const useParagraphStore = defineStore({
       datasetId: string,
       documentId: string,
       paragraphId: string,
-      data: any,
       loading?: Ref<boolean>
     ) {
       return new Promise((resolve, reject) => {

diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
@@ -128,6 +128,9 @@ h4 {
 .mt-16 {
   margin-top: calc(var(--app-base-px) * 2);
 }
+.mt-20 {
+  margin-top: calc(var(--app-base-px) * 2 + 4px);
+}
 
 .mb-4 {
   margin-bottom: calc(var(--app-base-px) - 4px);

diff --git a/ui/src/views/application-overview/component/EmbedDialog.vue b/ui/src/views/application-overview/component/EmbedDialog.vue
@@ -69,8 +69,7 @@ allow="microphone">
 </iframe>
 `
 
-  source2.value = `
-<script 
+  source2.value = `<script 
 async
 defer
 src="${window.location.origin}/api/application/embed?protocol=${window.location.protocol.replace(

diff --git a/ui/src/views/chat/index.vue b/ui/src/views/chat/index.vue
@@ -1,18 +1,45 @@
 <template>
   <div class="chat" v-loading="loading">
     <div class="chat__header">
-      <div class="chat-width">
-        <h2 class="ml-24">{{ applicationDetail?.name }}</h2>
-      </div>
+      <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
     </div>
-    <div class="chat__main chat-width">
-      <AiChat
-        v-model:data="applicationDetail"
-        :available="applicationAvailable"
-        :appId="applicationDetail?.id"
-      ></AiChat>
+    <div class="flex">
+      <div class="chat__left">
+        <div class="p-24 pb-0">
+          <el-button class="add-button w-full primary">
+            <el-icon><Plus /></el-icon><span class="ml-4">新建对话</span>
+          </el-button>
+          <p class="mt-20 mb-8">历史记录</p>
+        </div>
+        <div class="chat-list-height pt-0">
+          <el-scrollbar>
+            <div class="p-8 pt-0">
+              <common-list
+                :data="chatLogeData"
+                class="mt-8"
+                v-loading="loading"
+                @click="clickMemberHandle"
+              >
+                <template #default="{ row }">
+                  <auto-tooltip :content="row.abstract">
+                    {{ row.abstract }}
+                  </auto-tooltip>
+                </template>
+              </common-list>
+            </div>
+            <div class="gradient-divider lighter mt-8"><span>仅显示最近 20 条对话</span></div>
+          </el-scrollbar>
+        </div>
+      </div>
+      <div class="chat__right w-full">
+        <AiChat
+          v-model:data="applicationDetail"
+          :available="applicationAvailable"
+          :appId="applicationDetail?.id"
+        ></AiChat>
+      </div>
+      <div class="chat__footer"></div>
     </div>
-    <div class="chat__footer"></div>
   </div>
 </template>
 <script setup lang="ts">
@@ -25,11 +52,12 @@ const {
   params: { accessToken }
 } = route as any
 
-const { application, user } = useStore()
+const { application, user, log } = useStore()
 
 const loading = ref(false)
 const applicationDetail = ref<any>({})
 const applicationAvailable = ref<boolean>(true)
+const chatLogeData = ref<any[]>([])
 
 function getAccessToken(token: string) {
   application
@@ -46,11 +74,27 @@ function getProfile() {
     .getProfile(loading)
     .then((res) => {
       applicationDetail.value = res.data
+      getChatLog(applicationDetail.value.id)
     })
     .catch(() => {
       applicationAvailable.value = false
     })
 }
+
+function getChatLog(id: string) {
+  const page = {
+    current_page: 1,
+    page_size: 20
+  }
+  const param = {
+    history_day: 183
+  }
+
+  log.asyncGetChatLog(id, page, param, loading).then((res: any) => {
+    chatLogeData.value = res.data.records
+  })
+}
+
 onMounted(() => {
   user.changeUserType(2)
   getAccessToken(accessToken)
@@ -72,18 +116,32 @@ onMounted(() => {
     box-sizing: border-box;
     border-bottom: 1px solid var(--el-border-color);
   }
-  &__main {
+  &__left {
+    padding-top: calc(var(--app-header-height) - 8px);
+
+    background: #ffffff;
+    width: 280px;
+    .add-button {
+      border: 1px solid var(--el-color-primary);
+    }
+    .chat-list-height {
+      height: calc(100vh - var(--app-header-height) - 160px);
+    }
+  }
+  &__right {
+    width: calc(100% - 280px);
     padding-top: calc(var(--app-header-height) + 24px);
-    height: calc(100vh - var(--app-header-height) - 24px);
+    height: calc(100vh - var(--app-header-height) - 30px);
     overflow: hidden;
+    position: relative;
   }
   &__footer {
     background: #f3f7f9;
     height: 80px;
     position: absolute;
     bottom: 0;
-    left: 0;
-    width: 100%;
+    left: 280px;
+    width: calc(100% - 280px);
     box-sizing: border-box;
     border-radius: 8px !important;
     &:before {
@@ -96,6 +154,29 @@ onMounted(() => {
       height: 16px;
     }
   }
+  .gradient-divider {
+    position: relative;
+    text-align: center;
+    color: var(--el-color-info);
+    ::before {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
+      position: absolute;
+      left: 16px;
+      top: 50%;
+    }
+    ::after {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
+      position: absolute;
+      right: 16px;
+      top: 50%;
+    }
+  }
   .chat-width {
     max-width: var(--app-chat-width, 860px);
     margin: 0 auto;

diff --git a/ui/src/views/log/index.vue b/ui/src/views/log/index.vue
@@ -140,7 +140,7 @@ import logApi from '@/api/log'
 import { datetimeFormat } from '@/utils/time'
 import useStore from '@/stores'
 import type { Dict } from '@/api/type/common'
-const { application } = useStore()
+const { application, log } = useStore()
 const route = useRoute()
 const {
   params: { id }
@@ -311,7 +311,7 @@ function getList() {
   if (search.value) {
     obj = { ...obj, abstract: search.value }
   }
-  return logApi.getChatLog(id as string, paginationConfig, obj, loading).then((res) => {
+  return log.asyncGetChatLog(id as string, paginationConfig, obj, loading).then((res: any) => {
     tableData.value = res.data.records
     if (currentChatId.value) {
       currentChatId.value = tableData.value[0]?.id