From 159f6ad042734e174d7f6245b4013bdfd3dc4f92 Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Sun, 28 Jan 2024 15:22:20 +0800
Subject: [PATCH] update manage

---
 src/components/chatdoc/CreateRepository.vue   |  8 +++
 src/components/chatdoc/UploadDocument.vue     |  6 +-
 src/components/common/Navigator.vue           |  4 +-
 src/i18n/zh/chatdoc/message.ts                | 14 ++--
 src/i18n/zh/chatdoc/nav.ts                    |  2 +-
 src/i18n/zh/chatdoc/title.ts                  |  5 +-
 src/layouts/Chatdoc.vue                       | 32 +++++++---
 src/pages/chatdoc/Conversation.vue            | 27 +++++++-
 src/pages/chatdoc/Index.vue                   | 64 +++++++++++++++++--
 .../chatdoc/{Knowledge.vue => Manage.vue}     | 43 +++++++++++--
 src/router/chatdoc.ts                         |  8 +--
 src/router/constants.ts                       |  2 +-
 src/store/chatdoc/mutations.ts                |  1 +
 13 files changed, 180 insertions(+), 36 deletions(-)
 rename src/pages/chatdoc/{Knowledge.vue => Manage.vue} (76%)

diff --git a/src/components/chatdoc/CreateRepository.vue b/src/components/chatdoc/CreateRepository.vue
index 0f7805c..178ee1d 100644
--- a/src/components/chatdoc/CreateRepository.vue
+++ b/src/components/chatdoc/CreateRepository.vue
@@ -54,6 +54,10 @@ export default defineComponent({
   computed: {},
   methods: {
     async onSubmit() {
+      if (!this.form.name) {
+        ElMessage.error(this.$t('chatdoc.message.nameRequired'));
+        return;
+      }
       this.creating = true;
       this.$store
         .dispatch('chatdoc/createRepository', {
@@ -87,4 +91,8 @@ export default defineComponent({
   background-color: #eee;
   margin-bottom: 0;
 }
+
+.el-button {
+  border-radius: 20px;
+}
 </style>
diff --git a/src/components/chatdoc/UploadDocument.vue b/src/components/chatdoc/UploadDocument.vue
index 776210e..a5d598a 100644
--- a/src/components/chatdoc/UploadDocument.vue
+++ b/src/components/chatdoc/UploadDocument.vue
@@ -82,14 +82,16 @@ export default defineComponent({
           fileName: this.fileList[0].name
         })
         .then(() => {
-          this.learning = false;
           ElMessage.success(this.$t('chatdoc.message.createDocumentSuccess'));
           this.dialogVisible = false;
           this.$store.dispatch('chatdoc/getDocuments', { repositoryId: this.$route.params.repositoryId });
         })
         .catch(() => {
-          this.learning = false;
           ElMessage.error(this.$t('chatdoc.message.createDocumentError'));
+        })
+        .finally(() => {
+          this.fileList = [];
+          this.learning = false;
         });
     }
   }
diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue
index bb526e7..1864514 100644
--- a/src/components/common/Navigator.vue
+++ b/src/components/common/Navigator.vue
@@ -78,7 +78,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import {
   ROUTE_CHATDOC_INDEX,
   ROUTE_CHATDOC_CONVERSATION,
-  ROUTE_CHATDOC_KNOWLEDGE,
+  ROUTE_CHATDOC_MANAGE,
   ROUTE_CHATDOC_SETTING,
   ROUTE_CHAT_CONVERSATION,
   ROUTE_CHAT_CONVERSATION_NEW,
@@ -131,7 +131,7 @@ export default defineComponent({
         },
         displayName: this.$t('common.nav.chatdoc'),
         icon: 'fa-solid fa-file-lines',
-        routes: [ROUTE_CHATDOC_INDEX, ROUTE_CHATDOC_CONVERSATION, ROUTE_CHATDOC_KNOWLEDGE, ROUTE_CHATDOC_SETTING]
+        routes: [ROUTE_CHATDOC_INDEX, ROUTE_CHATDOC_CONVERSATION, ROUTE_CHATDOC_MANAGE, ROUTE_CHATDOC_SETTING]
       });
     }
 
diff --git a/src/i18n/zh/chatdoc/message.ts b/src/i18n/zh/chatdoc/message.ts
index cd7dfc5..ded4d27 100644
--- a/src/i18n/zh/chatdoc/message.ts
+++ b/src/i18n/zh/chatdoc/message.ts
@@ -1,12 +1,14 @@
 export default {
   introductionForKnowledge: '知识库中可添加文档，在机器人回答时，可运用库中的知识进行回复。',
+  introductionForRepository:
+    '知识库是一组文档的集合，您可以在知识库中添加文档，机器人在回答时，会从知识库中的文档中进行回复。',
   uploadDocumentsExceed: '上传文档数量超过限制',
   uploadDocumentsError: '上传文档失败',
   uploadDocumentsSuccess: '上传文档成功',
-  createDocumentSuccess: '录入文档成功',
-  startCreateDocument: '开始录入文档...',
-  createDocumentError: '录入文档失败',
-  dragOrClickToUpload: '拖拽或点击上传',
+  createDocumentSuccess: '学习文档成功',
+  startCreateDocument: '开始学习文档...',
+  createDocumentError: '学习文档失败',
+  dragOrClickToUpload: '拖拽或点击上传文档',
   learningDocument: '学习中，请稍后...',
   startNewChat: '开始新会话',
   errorApiError: '回答失败，请稍后重试',
@@ -23,5 +25,7 @@ export default {
   createRepositorySuccess: '创建知识库成功',
   createRepositoryFailed: '创建知识库失败',
   deleteRepositorySuccess: '删除知识库成功',
-  deleteDocumentSuccess: '删除文档成功'
+  deleteDocumentSuccess: '删除文档成功',
+  currentRepository: '当前知识库',
+  nameRequired: '名称不能为空'
 };
diff --git a/src/i18n/zh/chatdoc/nav.ts b/src/i18n/zh/chatdoc/nav.ts
index 641081b..074d904 100644
--- a/src/i18n/zh/chatdoc/nav.ts
+++ b/src/i18n/zh/chatdoc/nav.ts
@@ -1,5 +1,5 @@
 export default {
   chat: '对话',
   setting: '设置',
-  knowledge: '知识库'
+  manage: '管理'
 };
diff --git a/src/i18n/zh/chatdoc/title.ts b/src/i18n/zh/chatdoc/title.ts
index 8f3f59f..55b480a 100644
--- a/src/i18n/zh/chatdoc/title.ts
+++ b/src/i18n/zh/chatdoc/title.ts
@@ -1,4 +1,5 @@
 export default {
-  knowledge: '我的知识库',
-  createRepository: '创建知识库'
+  manage: '管理知识库',
+  createRepository: '创建知识库',
+  repositories: '知识库列表'
 };
diff --git a/src/layouts/Chatdoc.vue b/src/layouts/Chatdoc.vue
index 7355843..0dc27c0 100644
--- a/src/layouts/Chatdoc.vue
+++ b/src/layouts/Chatdoc.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="main">
     <el-menu v-if="repositoryId" :default-active="activeMenu" mode="horizontal" :ellipsis="false" class="menu">
+      <div class="repository">
+        <font-awesome-icon class="mr-2" :icon="['fas', 'book']" />
+        <span>{{ repository?.name }}</span>
+      </div>
       <el-menu-item
         v-for="(menuItem, menuItemIndex) in menuItems"
         :key="menuItemIndex"
@@ -19,8 +23,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { ElMenu, ElMenuItem } from 'element-plus';
-import { ROUTE_CHATDOC_CONVERSATION_NEW, ROUTE_CHATDOC_KNOWLEDGE } from '@/router';
+import { ROUTE_CHATDOC_CONVERSATION_NEW, ROUTE_CHATDOC_MANAGE } from '@/router';
 import { RouteLocationRaw } from 'vue-router';
+import { IChatdocRepository } from '@/operators';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 interface IMenuItem {
   index: string;
@@ -38,7 +44,8 @@ export default defineComponent({
   name: 'LayoutChatdoc',
   components: {
     ElMenu,
-    ElMenuItem
+    ElMenuItem,
+    FontAwesomeIcon
   },
   data(): IData {
     return {
@@ -62,10 +69,10 @@ export default defineComponent({
         },
         */
         {
-          index: 'knowledge',
-          title: this.$t('chatdoc.nav.knowledge'),
+          index: 'manage',
+          title: this.$t('chatdoc.nav.manage'),
           route: {
-            name: ROUTE_CHATDOC_KNOWLEDGE
+            name: ROUTE_CHATDOC_MANAGE
           }
         }
       ]
@@ -79,6 +86,9 @@ export default defineComponent({
         return filterResult[0]?.index;
       }
       return undefined;
+    },
+    repository(): IChatdocRepository | undefined {
+      return this.$store.state?.chatdoc?.repositories?.find((repository) => repository.id === this.repositoryId);
     }
   },
   async mounted() {
@@ -113,6 +123,15 @@ export default defineComponent({
   flex: 1;
   display: flex;
   flex-direction: column;
+  position: relative;
+  height: 100%;
+
+  .repository {
+    position: absolute;
+    left: 50px;
+    top: 20px;
+    font-weight: bold;
+  }
 
   .menu {
     width: 100%;
@@ -121,10 +140,7 @@ export default defineComponent({
 
   .chatdoc {
     height: 100%;
-    flex: 1;
     width: 100%;
-    display: flex;
-    flex-direction: row;
   }
 }
 </style>
diff --git a/src/pages/chatdoc/Conversation.vue b/src/pages/chatdoc/Conversation.vue
index 95dbdd9..d999f95 100644
--- a/src/pages/chatdoc/Conversation.vue
+++ b/src/pages/chatdoc/Conversation.vue
@@ -4,6 +4,15 @@
       <div class="wrapper">
         <conversations class="side" />
         <div class="chat">
+          <div class="status">
+            <api-status
+              :initializing="initializing"
+              :application="application"
+              :need-apply="needApply"
+              :api-id="apiId"
+              @refresh="$store.dispatch('chatdoc/getApplications')"
+            />
+          </div>
           <div class="dialogue">
             <div class="messages">
               <message
@@ -54,6 +63,8 @@ import { log } from '@/utils';
 import { ROUTE_CHATDOC_CONVERSATION } from '@/router';
 import axios from 'axios';
 import { isJSONString } from '@/utils/is';
+import { Status } from '@/store/common/models';
+import ApiStatus from '@/components/common/ApiStatus.vue';
 
 export default defineComponent({
   name: 'ChatdocChat',
@@ -61,7 +72,8 @@ export default defineComponent({
     Layout,
     Conversations,
     Message,
-    InputBox
+    InputBox,
+    ApiStatus
   },
   data() {
     return {
@@ -99,6 +111,15 @@ export default defineComponent({
     },
     applications() {
       return this.$store.state.chatdoc.applications;
+    },
+    needApply() {
+      return this.$store.state.chatdoc.getApplicationsStatus === Status.Success && !this.application;
+    },
+    initializing() {
+      return this.$store.state.chatdoc.getApplicationsStatus === Status.Request;
+    },
+    apiId() {
+      return API_ID_CHATDOC_CHAT;
     }
   },
   async mounted() {
@@ -246,6 +267,10 @@ export default defineComponent({
   height: 100%;
   display: flex;
 
+  .status {
+    margin-bottom: 10px;
+  }
+
   .dialogue {
     flex: 1;
     overflow-y: scroll;
diff --git a/src/pages/chatdoc/Index.vue b/src/pages/chatdoc/Index.vue
index 9db627e..303f22f 100644
--- a/src/pages/chatdoc/Index.vue
+++ b/src/pages/chatdoc/Index.vue
@@ -2,6 +2,21 @@
   <layout>
     <template #chatdoc>
       <div class="wrapper">
+        <div class="title">
+          {{ $t('chatdoc.title.repositories') }}
+        </div>
+        <div class="introduction">
+          {{ $t('chatdoc.message.introductionForRepository') }}
+        </div>
+        <div class="status">
+          <api-status
+            :initializing="initializing"
+            :application="application"
+            :need-apply="needApply"
+            :api-id="apiId"
+            @refresh="$store.dispatch('chatdoc/getApplications')"
+          />
+        </div>
         <el-row class="repositories" :gutter="15">
           <el-col :xl="4" :md="6" :sm="12" :xs="24">
             <el-card class="repository text-center" shadow="hover" @click="onCreate">
@@ -48,10 +63,13 @@
 import { defineComponent } from 'vue';
 import Layout from '@/layouts/Chatdoc.vue';
 import { ElCard, ElRow, ElCol, ElDropdown, ElDropdownItem, ElDropdownMenu, ElMessage } from 'element-plus';
-import { IChatdocRepository } from '@/operators';
-import { ROUTE_CHATDOC_KNOWLEDGE } from '@/router';
+import { IApplication, IChatdocRepository } from '@/operators';
+import { ROUTE_CHATDOC_MANAGE } from '@/router';
 import CreateRepository from '@/components/chatdoc/CreateRepository.vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import ApiStatus from '@/components/common/ApiStatus.vue';
+import { Status } from '@/store/common/models';
+import { API_ID_CHATDOC_REPOSITORIES } from '@/operators/chatdoc/constants';
 
 export default defineComponent({
   name: 'ChatdocKnowledge',
@@ -64,14 +82,32 @@ export default defineComponent({
     FontAwesomeIcon,
     ElDropdown,
     ElDropdownItem,
-    ElDropdownMenu
+    ElDropdownMenu,
+    ApiStatus
   },
   data() {
     return {};
   },
   computed: {
+    apiId() {
+      return API_ID_CHATDOC_REPOSITORIES;
+    },
     repositories() {
       return this.$store.state.chatdoc.repositories;
+    },
+    needApply() {
+      return this.$store.state.chatdoc.getApplicationsStatus === Status.Success && !this.application;
+    },
+    applications() {
+      return this.$store.state.chatdoc.applications;
+    },
+    application() {
+      return this.applications?.find(
+        (application: IApplication) => application.api?.id === API_ID_CHATDOC_REPOSITORIES
+      );
+    },
+    initializing() {
+      return this.$store.state.chatdoc.getApplicationsStatus === Status.Request;
     }
   },
   async mounted() {},
@@ -81,7 +117,7 @@ export default defineComponent({
     },
     onClick(repository: IChatdocRepository) {
       this.$router.push({
-        name: ROUTE_CHATDOC_KNOWLEDGE,
+        name: ROUTE_CHATDOC_MANAGE,
         params: {
           repositoryId: repository.id
         }
@@ -99,9 +135,29 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .wrapper {
+  width: 100%;
+  height: 100%;
   padding: 20px;
   background-color: #f2f3f5;
 }
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.introduction {
+  margin-bottom: 20px;
+  font-size: 14px;
+  color: #666;
+}
+
+.status {
+  margin-bottom: 10px;
+  width: fit-content;
+}
+
 .repository {
   width: 100%;
   height: 150px;
diff --git a/src/pages/chatdoc/Knowledge.vue b/src/pages/chatdoc/Manage.vue
similarity index 76%
rename from src/pages/chatdoc/Knowledge.vue
rename to src/pages/chatdoc/Manage.vue
index 329184d..a70686a 100644
--- a/src/pages/chatdoc/Knowledge.vue
+++ b/src/pages/chatdoc/Manage.vue
@@ -3,11 +3,20 @@
     <template #chatdoc>
       <div class="wrapper">
         <div class="title">
-          {{ $t('chatdoc.title.knowledge') }}
+          {{ $t('chatdoc.title.manage') }}
         </div>
         <div class="introduction">
           {{ $t('chatdoc.message.introductionForKnowledge') }}
         </div>
+        <div class="status">
+          <api-status
+            :initializing="initializing"
+            :application="application"
+            :need-apply="needApply"
+            :api-id="apiId"
+            @refresh="$store.dispatch('chatdoc/getApplications')"
+          />
+        </div>
         <div class="operations">
           <upload-document />
         </div>
@@ -55,9 +64,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Layout from '@/layouts/Chatdoc.vue';
-import { IChatdocRepository } from '@/operators';
+import { IApplication, IChatdocRepository } from '@/operators';
 import { ElButton, ElTag, ElTable, ElTableColumn, ElMessage } from 'element-plus';
 import UploadDocument from '@/components/chatdoc/UploadDocument.vue';
+import { Status } from '@/store/common/models';
+import { API_ID_CHATDOC_DOCUMENTS } from '@/operators/chatdoc/constants';
+import ApiStatus from '@/components/common/ApiStatus.vue';
 
 export default defineComponent({
   name: 'ChatdocKnowledge',
@@ -66,6 +78,7 @@ export default defineComponent({
     ElButton,
     ElTable,
     ElTag,
+    ApiStatus,
     ElTableColumn,
     UploadDocument
   },
@@ -81,6 +94,21 @@ export default defineComponent({
     },
     documents() {
       return this.repository?.documents;
+    },
+    needApply() {
+      return this.$store.state.chatdoc.getApplicationsStatus === Status.Success && !this.application;
+    },
+    applications() {
+      return this.$store.state.chatdoc.applications;
+    },
+    application() {
+      return this.applications?.find((application: IApplication) => application.api?.id === API_ID_CHATDOC_DOCUMENTS);
+    },
+    initializing() {
+      return this.$store.state.chatdoc.getApplicationsStatus === Status.Request;
+    },
+    apiId() {
+      return API_ID_CHATDOC_DOCUMENTS;
     }
   },
   async mounted() {
@@ -96,11 +124,7 @@ export default defineComponent({
       });
   },
   methods: {
-    onUpload() {
-      console.log('onUpload');
-    },
     onDelete(id: string) {
-      // ElMessage.info(this.$t('chatdoc.message.deleteDocument'));
       this.$store.dispatch('chatdoc/deleteDocument', { id }).then(() => {
         ElMessage.success(this.$t('chatdoc.message.deleteDocumentSuccess'));
         this.$store.dispatch('chatdoc/getDocuments', {
@@ -114,6 +138,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .wrapper {
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   padding: 30px;
@@ -141,4 +167,9 @@ export default defineComponent({
 .documents {
   width: 100%;
 }
+
+.status {
+  margin-bottom: 10px;
+  width: fit-content;
+}
 </style>
diff --git a/src/router/chatdoc.ts b/src/router/chatdoc.ts
index 50c48e1..a9f858a 100644
--- a/src/router/chatdoc.ts
+++ b/src/router/chatdoc.ts
@@ -2,7 +2,7 @@ import {
   ROUTE_CHATDOC_CONVERSATION,
   ROUTE_CHATDOC_CONVERSATION_NEW,
   ROUTE_CHATDOC_INDEX,
-  ROUTE_CHATDOC_KNOWLEDGE,
+  ROUTE_CHATDOC_MANAGE,
   ROUTE_CHATDOC_SETTING
 } from './constants';
 
@@ -29,9 +29,9 @@ export default {
       component: () => import('@/pages/chatdoc/Conversation.vue')
     },
     {
-      path: 'repository/:repositoryId/knowledge',
-      name: ROUTE_CHATDOC_KNOWLEDGE,
-      component: () => import('@/pages/chatdoc/Knowledge.vue')
+      path: 'repository/:repositoryId/manage',
+      name: ROUTE_CHATDOC_MANAGE,
+      component: () => import('@/pages/chatdoc/Manage.vue')
     },
     {
       path: 'repository/:repositoryId',
diff --git a/src/router/constants.ts b/src/router/constants.ts
index ca47b7c..b7d54b1 100644
--- a/src/router/constants.ts
+++ b/src/router/constants.ts
@@ -13,7 +13,7 @@ export const ROUTE_CHATDOC_INDEX = 'chatdoc-index';
 export const ROUTE_CHATDOC_CONVERSATION = 'chatdoc-conversation';
 export const ROUTE_CHATDOC_CONVERSATION_NEW = 'chatdoc-conversation-new';
 export const ROUTE_CHATDOC_SETTING = 'chatdoc-setting';
-export const ROUTE_CHATDOC_KNOWLEDGE = 'chatdoc-knowledge';
+export const ROUTE_CHATDOC_MANAGE = 'chatdoc-knowledge';
 
 export const ROUTE_CONSOLE_ROOT = 'console-root';
 export const ROUTE_CONSOLE_ORDER_LIST = 'console-order-list';
diff --git a/src/store/chatdoc/mutations.ts b/src/store/chatdoc/mutations.ts
index ed30048..f22f1f8 100644
--- a/src/store/chatdoc/mutations.ts
+++ b/src/store/chatdoc/mutations.ts
@@ -7,6 +7,7 @@ import { log } from '@/utils';
 export const resetAll = (state: IChatdocState): void => {
   state.applications = [];
   state.getApplicationsStatus = Status.None;
+  state.repositories = [];
 };
 
 export const setApplications = (state: IChatdocState, payload: IApplication[]): void => {