From c62a12c23726d08861617255a1e0f347c5a7872b Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 7 Dec 2023 15:22:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E8=AF=9D=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/log.ts                             | 27 +++++++-
 ui/src/api/model.ts                           |  2 +-
 ui/src/api/paragraph.ts                       | 12 +++-
 ui/src/components/ai-chat/index.vue           |  6 +-
 ui/src/components/index.ts                    |  2 +
 ui/src/styles/element-plus.scss               | 13 ++++
 ui/src/views/application/CreateAndSetting.vue |  1 -
 ui/src/views/application/index.vue            |  7 +-
 ui/src/views/chat/index.vue                   |  1 -
 ui/src/views/dataset/index.vue                |  6 +-
 .../views/log/component/ChatRecordDrawer.vue  | 64 +++++++++++++++++++
 ui/src/views/log/index.vue                    |  7 +-
 .../paragraph/component/ParagraphDialog.vue   |  4 +-
 ui/src/views/paragraph/index.vue              | 33 +++++-----
 14 files changed, 152 insertions(+), 33 deletions(-)
 create mode 100644 ui/src/views/log/component/ChatRecordDrawer.vue

diff --git a/ui/src/api/log.ts b/ui/src/api/log.ts
index 0762a0385..554ac87e5 100644
--- a/ui/src/api/log.ts
+++ b/ui/src/api/log.ts
@@ -39,10 +39,33 @@ const delChatLog: (
   chat_id: string,
   loading?: Ref<boolean>
 ) => Promise<Result<boolean>> = (applicaiton_id, chat_id, loading) => {
-  return del(`${prefix}/${applicaiton_id}/document/${chat_id}`, {}, loading)
+  return del(`${prefix}/${applicaiton_id}/chat/${chat_id}`, undefined, {}, loading)
+}
+
+/**
+ * 日志记录
+ * @param 参数
+ * application_id, chart_id
+ * page {
+          "current_page": "string",
+          "page_size": "string",
+        }
+ */
+const getChatRecordLog: (
+  applicaiton_id: String,
+  chart_id: String,
+  page: pageRequest,
+  loading?: Ref<boolean>
+) => Promise<Result<any>> = (applicaiton_id, chart_id, page, loading) => {
+  return get(
+    `${prefix}/${applicaiton_id}/chat/${chart_id}/chat_record/${page.current_page}/${page.page_size}`,
+    undefined,
+    loading
+  )
 }
 
 export default {
   getChatLog,
-  delChatLog
+  delChatLog,
+  getChatRecordLog
 }
diff --git a/ui/src/api/model.ts b/ui/src/api/model.ts
index 4ed44a9eb..fe8e63f8b 100644
--- a/ui/src/api/model.ts
+++ b/ui/src/api/model.ts
@@ -111,7 +111,7 @@ const deleteModel: (model_id: string, loading?: Ref<boolean>) => Promise<Result<
   model_id,
   loading
 ) => {
-  return del(`${prefix}/${model_id}`, {}, loading)
+  return del(`${prefix}/${model_id}`, undefined, {}, loading)
 }
 export default {
   getModel,
diff --git a/ui/src/api/paragraph.ts b/ui/src/api/paragraph.ts
index 6938e703c..d85cb6b68 100644
--- a/ui/src/api/paragraph.ts
+++ b/ui/src/api/paragraph.ts
@@ -37,9 +37,15 @@ const getParagraph: (
 const delParagraph: (
   dataset_id: string,
   document_id: string,
-  paragraph_id: string
-) => Promise<Result<boolean>> = (dataset_id, document_id, paragraph_id) => {
-  return del(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}`)
+  paragraph_id: string,
+  loading?: Ref<boolean>
+) => Promise<Result<boolean>> = (dataset_id, document_id, paragraph_id, loading) => {
+  return del(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}`,
+    undefined,
+    {},
+    loading
+  )
 }
 
 /**
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index ee306cb82..51beb6637 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -94,7 +94,7 @@
         </template>
       </div>
     </el-scrollbar>
-    <div class="ai-chat__operate p-24">
+    <div class="ai-chat__operate p-24" v-if="!record">
       <div class="operate-textarea flex">
         <el-input
           ref="quickInputRef"
@@ -131,6 +131,7 @@ import applicationApi from '@/api/application'
 import { ChatManagement, type chatType } from '@/api/type/application'
 import { randomId } from '@/utils/utils'
 import useStore from '@/stores'
+defineOptions({ name: 'AiChat' })
 const route = useRoute()
 const {
   params: { accessToken }
@@ -140,7 +141,8 @@ const props = defineProps({
     type: Object,
     default: () => {}
   },
-  appId: String
+  appId: String,
+  record: Boolean
 })
 const { application } = useStore()
 
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 1875fd054..103d701f5 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -15,6 +15,7 @@ import CommonList from './common-list/index.vue'
 import MarkdownRenderer from './markdown-renderer/index.vue'
 import dynamicsForm from './dynamics-form'
 import CardCheckbox from './card-checkbox/index.vue'
+import AiChat from './ai-chat/index.vue'
 
 export default {
   install(app: App) {
@@ -34,5 +35,6 @@ export default {
     app.use(dynamicsForm)
     app.component(MarkdownRenderer.name, MarkdownRenderer)
     app.component(CardCheckbox.name, CardCheckbox)
+    app.component(AiChat.name, AiChat)
   }
 }
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 4edf596cf..de96f103d 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -182,3 +182,16 @@
 .el-tabs__header {
   margin: 0 0 12px;
 }
+
+.el-drawer {
+  .el-drawer__header {
+    padding: 16px 24px;
+    margin: 0;
+    border-bottom: 1px solid var(--el-border-color);
+    color: var(--app-text-color);
+  }
+  .el-drawer__footer {
+    border-top: 1px solid var(--el-border-color);
+    padding: 16px 24px;
+  }
+}
diff --git a/ui/src/views/application/CreateAndSetting.vue b/ui/src/views/application/CreateAndSetting.vue
index 37cdcec9f..5496f9818 100644
--- a/ui/src/views/application/CreateAndSetting.vue
+++ b/ui/src/views/application/CreateAndSetting.vue
@@ -181,7 +181,6 @@
 import { reactive, ref, watch, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { groupBy } from 'lodash'
-import AiChat from '@/components/ai-chat/index.vue'
 import AddDatasetDialog from './components/AddDatasetDialog.vue'
 import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
 import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index eed3eae65..8f0cffd47 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -109,7 +109,8 @@ const noMore = computed(
   () =>
     applicationList.value.length > 0 &&
     applicationList.value.length === pageConfig.total &&
-    pageConfig.total > 20
+    pageConfig.total > 20 &&
+    !loading.value
 )
 const disabledScroll = computed(
   () => applicationList.value.length > 0 && (loading.value || noMore.value)
@@ -144,8 +145,9 @@ function deleteApplication(row: any) {
       applicationApi
         .delApplication(row.id)
         .then(() => {
+          const index = applicationList.value.findIndex((v) => v.id === row.id)
+          applicationList.value.splice(index, 1)
           MsgSuccess('删除成功')
-          getList()
         })
         .catch(() => {
           loading.value = false
@@ -154,7 +156,6 @@ function deleteApplication(row: any) {
     .catch(() => {})
 }
 
-
 function getList() {
   applicationApi
     .getApplication(pageConfig, searchValue.value && { name: searchValue.value }, loading)
diff --git a/ui/src/views/chat/index.vue b/ui/src/views/chat/index.vue
index c97c3516b..cd9c49888 100644
--- a/ui/src/views/chat/index.vue
+++ b/ui/src/views/chat/index.vue
@@ -14,7 +14,6 @@
 <script setup lang="ts">
 import { reactive, ref, watch, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import AiChat from '@/components/ai-chat/index.vue'
 import applicationApi from '@/api/application'
 import useStore from '@/stores'
 const route = useRoute()
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 185afa5e6..a2aa96c2d 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -82,7 +82,8 @@ const noMore = computed(
   () =>
     datasetList.value.length > 0 &&
     datasetList.value.length === pageConfig.total &&
-    pageConfig.total > 20
+    pageConfig.total > 20 &&
+    !loading.value
 )
 const disabledScroll = computed(
   () => datasetList.value.length > 0 && (loading.value || noMore.value)
@@ -115,8 +116,9 @@ function deleteDateset(row: any) {
       datasetApi
         .delDateset(row.id)
         .then(() => {
+          const index = datasetList.value.findIndex((v) => v.id === row.id)
+          datasetList.value.splice(index, 1)
           MsgSuccess('删除成功')
-          getList()
         })
         .catch(() => {
           loading.value = false
diff --git a/ui/src/views/log/component/ChatRecordDrawer.vue b/ui/src/views/log/component/ChatRecordDrawer.vue
new file mode 100644
index 000000000..92070ad7b
--- /dev/null
+++ b/ui/src/views/log/component/ChatRecordDrawer.vue
@@ -0,0 +1,64 @@
+<template>
+  <el-drawer
+    v-model="visible"
+    size="50%"
+    append-to-body
+    @close="closeHandel"
+    class="chat-record-drawer"
+  >
+    <template #header>
+      <h4>应用标题</h4>
+    </template>
+    <AiChat record></AiChat>
+    <template #footer>
+      <div>
+        <el-button>上一条</el-button>
+        <el-button>下一条</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import logApi from '@/api/log'
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const loading = ref(false)
+const visible = ref(false)
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+
+function closeHandel() {}
+
+function getChatRecord(chatId) {
+  logApi.getChatRecordLog(id as string, chatId, paginationConfig, loading).then((res) => {
+    // tableData.value = res.data.records
+    paginationConfig.total = res.data.total
+  })
+}
+
+const open = (id) => {
+  getChatRecord(id)
+  visible.value = true
+}
+defineExpose({
+  open
+})
+</script>
+<style lang="scss">
+.chat-record-drawer {
+  .el-drawer__body {
+    background: var(--app-layout-bg-color);
+    padding: 24px 0;
+  }
+}
+</style>
diff --git a/ui/src/views/log/index.vue b/ui/src/views/log/index.vue
index 415603aa0..11aab4fa9 100644
--- a/ui/src/views/log/index.vue
+++ b/ui/src/views/log/index.vue
@@ -62,11 +62,13 @@
         </el-table-column>
       </app-table>
     </div>
+    <ChatRecordDrawer ref="ChatRecordRef" />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, reactive, computed } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { useRoute } from 'vue-router'
+import ChatRecordDrawer from './component/ChatRecordDrawer.vue'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import logApi from '@/api/log'
 import { datetimeFormat } from '@/utils/time'
@@ -93,6 +95,8 @@ const dayOptions = [
     label: '过去半年'
   }
 ]
+
+const ChatRecordRef = ref()
 const loading = ref(false)
 const paginationConfig = reactive({
   current_page: 1,
@@ -106,6 +110,7 @@ const search = ref('')
 
 function rowClickHandle(row: any) {
   // router.push({ path: `/dataset/${id}/${row.id}` })
+  ChatRecordRef.value.open(row.id)
 }
 
 function deleteLog(row: any) {
diff --git a/ui/src/views/paragraph/component/ParagraphDialog.vue b/ui/src/views/paragraph/component/ParagraphDialog.vue
index edc74c366..83aa1d512 100644
--- a/ui/src/views/paragraph/component/ParagraphDialog.vue
+++ b/ui/src/views/paragraph/component/ParagraphDialog.vue
@@ -94,8 +94,8 @@ const submitHandle = async () => {
     if (problemId.value) {
       paragraph
         .asyncPutParagraph(id, documentId, problemId.value, paragraphFormRef.value?.form)
-        .then(() => {
-          emit('refresh')
+        .then((res: any) => {
+          emit('refresh', res.data)
           loading.value = false
           isEdit.value = false
         })
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index 49f4f8c33..34b0e3f5b 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -5,7 +5,7 @@
         <el-button @click="addParagraph" type="primary" :disabled="loading"> 添加分段 </el-button>
       </div>
     </template>
-    <div class="document-detail__main p-16">
+    <div class="document-detail__main p-16" v-loading="pageConfig.current_page === 1 && loading">
       <div class="flex-between p-8">
         <span>{{ pageConfig.total }} 段落</span>
         <el-input
@@ -24,7 +24,7 @@
         </el-input>
       </div>
       <el-scrollbar>
-        <div class="document-detail-height" v-loading="pageConfig.current_page === 1 && loading">
+        <div class="document-detail-height">
           <el-empty v-if="paragraphDetail.length == 0" description="暂无数据" />
           <el-row v-else v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
             <el-col
@@ -114,7 +114,8 @@ const noMore = computed(
   () =>
     paragraphDetail.value.length > 0 &&
     paragraphDetail.value.length === pageConfig.total &&
-    pageConfig.total > 20
+    pageConfig.total > 20 &&
+    !loading.value
 )
 const disabledScroll = computed(
   () => paragraphDetail.value.length > 0 && (loading.value || noMore.value)
@@ -154,16 +155,11 @@ function deleteParagraph(row: any) {
     confirmButtonClass: 'danger'
   })
     .then(() => {
-      loading.value = true
-      paragraphApi
-        .delParagraph(id, documentId, row.id)
-        .then(() => {
-          MsgSuccess('删除成功')
-          getParagraphList()
-        })
-        .catch(() => {
-          loading.value = false
-        })
+      paragraphApi.delParagraph(id, documentId, row.id, loading).then(() => {
+        const index = paragraphDetail.value.findIndex((v) => v.id === row.id)
+        paragraphDetail.value.splice(index, 1)
+        MsgSuccess('删除成功')
+      })
     })
     .catch(() => {})
 }
@@ -205,8 +201,15 @@ function getParagraphList() {
     })
 }
 
-function refresh() {
-  getParagraphList()
+function refresh(data: any) {
+  if (data) {
+    const index = paragraphDetail.value.findIndex((v) => v.id === data.id)
+    paragraphDetail.value.splice(index, 1, data)
+  } else {
+    pageConfig.current_page = 1
+    paragraphDetail.value = []
+    getParagraphList()
+  }
 }
 
 onMounted(() => {