From 65c923fe8e4f00e935864897887a539c7c176610 Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Sun, 28 Jan 2024 01:35:45 +0800
Subject: [PATCH] update coversations

---
 src/components/chatdoc/Conversations.vue  | 192 ++++++++++++++++++++++
 src/components/chatdoc/SidePanel.vue      |  27 ++-
 src/components/chatdoc/UploadDocument.vue |  97 +++++++++++
 src/components/common/Navigator.vue       |   4 +-
 src/i18n/zh/chatdoc/button.ts             |   3 +
 src/i18n/zh/chatdoc/field.ts              |  11 ++
 src/i18n/zh/chatdoc/index.ts              |   4 +-
 src/i18n/zh/chatdoc/message.ts            |  39 ++---
 src/i18n/zh/chatdoc/title.ts              |   8 +-
 src/layouts/Chatdoc.vue                   |  29 +++-
 src/operators/chatdoc/models.ts           |  13 ++
 src/operators/chatdoc/operator.ts         |  84 +++++++++-
 src/pages/chatdoc/Chat.vue                |  22 ---
 src/pages/chatdoc/Conversation.vue        |  64 ++++++++
 src/pages/chatdoc/Index.vue               |   2 +-
 src/pages/chatdoc/Knowledge.vue           |  95 +++++++++--
 src/router/chatdoc.ts                     |  23 ++-
 src/router/constants.ts                   |   3 +-
 src/store/chatdoc/actions.ts              |  65 +++++++-
 src/store/chatdoc/mutations.ts            |  33 +++-
 src/store/chatdoc/persist.ts              |   1 +
 src/store/index.ts                        |   3 +-
 22 files changed, 708 insertions(+), 114 deletions(-)
 create mode 100644 src/components/chatdoc/Conversations.vue
 create mode 100644 src/components/chatdoc/UploadDocument.vue
 create mode 100644 src/i18n/zh/chatdoc/button.ts
 create mode 100644 src/i18n/zh/chatdoc/field.ts
 delete mode 100644 src/pages/chatdoc/Chat.vue
 create mode 100644 src/pages/chatdoc/Conversation.vue
 create mode 100644 src/store/chatdoc/persist.ts

diff --git a/src/components/chatdoc/Conversations.vue b/src/components/chatdoc/Conversations.vue
new file mode 100644
index 0000000..3a1f965
--- /dev/null
+++ b/src/components/chatdoc/Conversations.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="panel">
+    <el-skeleton v-if="loading && conversations === undefined" />
+    <div v-else class="conversations">
+      <div class="conversation" @click="onNewConversation">
+        <div class="icons">
+          <font-awesome-icon icon="fa-solid fa-plus" class="icon" />
+        </div>
+        <div class="title">
+          {{ $t('chatdoc.message.startNewChat') }}
+        </div>
+      </div>
+      <div
+        v-for="(conversation, conversationIndex) in conversations"
+        :key="conversationIndex"
+        :class="{ conversation: true, active: conversation.id === conversationId }"
+        @click="onClick(conversation.id)"
+      >
+        <div class="icons">
+          <font-awesome-icon icon="fa-regular fa-comment" class="icon" />
+        </div>
+        <div class="title">
+          <span v-if="conversation?.deleting">
+            {{ `${$t('chatdoc.message.confirmDelete')}?` }}
+          </span>
+          <span v-else-if="conversation?.editing">
+            <el-input v-model="conversation.title" @keydown.enter="onConfirm(conversation)" />
+          </span>
+          <span v-else-if="conversation?.title || conversation?.messages">{{
+            conversation?.title || conversation?.messages[conversation?.messages.length - 1]?.content
+          }}</span>
+        </div>
+        <div class="operations">
+          <font-awesome-icon
+            v-if="!conversation?.editing && !conversation.deleting"
+            icon="fa-solid fa-edit"
+            class="icon icon-edit"
+            @click.stop="conversation.editing = true"
+          />
+          <font-awesome-icon
+            v-if="!conversation?.editing && !conversation.deleting"
+            icon="fa-solid fa-trash"
+            class="icon icon-delete"
+            @click.stop="conversation.deleting = true"
+          />
+          <font-awesome-icon
+            v-if="conversation?.editing || conversation.deleting"
+            icon="fa-solid fa-check"
+            class="icon icon-confirm"
+            @click.stop="onConfirm(conversation)"
+          />
+          <font-awesome-icon
+            v-if="conversation?.editing || conversation.deleting"
+            icon="fa-solid fa-xmark"
+            class="icon icon-cancel"
+            @click.stop="
+              conversation.editing = false;
+              conversation.deleting = false;
+            "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElSkeleton, ElInput } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { ROUTE_CHAT_CONVERSATION } from '@/router/constants';
+import { IChatdocRepository, chatdocOperator } from '@/operators';
+import { IChatdocConversation } from '@/operators';
+
+export default defineComponent({
+  name: 'SidePanel',
+  components: {
+    ElInput,
+    FontAwesomeIcon,
+    ElSkeleton
+  },
+  props: {},
+  emits: ['click'],
+  computed: {
+    conversationId() {
+      return this.$route.params?.id?.toString();
+    },
+    repository(): IChatdocRepository | undefined {
+      return this.$store.state?.chatdoc?.repositories?.find((repository) => repository.id === this.id);
+    },
+    conversations() {
+      return this.repository?.conversations;
+    },
+    applications() {
+      return this.$store.state.chatdoc.applications;
+    }
+  },
+  methods: {
+    async onNewConversation() {
+      // this.$router.push({
+      //   name: ROUTE_CHATDOC_CONVERSATION
+      // });
+    },
+    async onConfirm(conversation: IChatdocConversation) {
+      if (conversation?.deleting) {
+        await chatdocOperator.deleteConversation(conversation.id);
+        await this.$store.dispatch('chat/getConversations');
+      } else if (conversation?.editing) {
+        await chatdocOperator.updateConversation(conversation);
+        await this.$store.dispatch('chat/getConversations');
+      } else {
+        conversation.editing = true;
+      }
+    },
+    onClick(id: string) {
+      if (!id) {
+        return;
+      }
+      this.$router.push({
+        name: ROUTE_CHAT_CONVERSATION,
+        params: {
+          id
+        }
+      });
+      this.$emit('click', id);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 15px;
+  width: 300px;
+  height: 100%;
+  border-right: 1px solid #eee;
+  overflow-y: scroll;
+
+  .conversations {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .conversation {
+      width: 100%;
+      height: 55px;
+      display: flex;
+      flex-direction: row;
+      padding: 10px;
+      margin-bottom: 5px;
+      border: 1px dashed hsl(0, 0%, 93%);
+      line-height: 30px;
+      border-radius: 10px;
+      color: #666;
+      cursor: pointer;
+
+      &.active,
+      &:hover {
+        background-color: #eee;
+      }
+
+      .icons {
+        width: 30px;
+        padding-left: 10px;
+        .icon {
+          font-size: 14px;
+        }
+      }
+      .title {
+        flex: 1;
+        font-size: 14px;
+        line-height: 32px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-right: 8px;
+        color: #666;
+      }
+      .operations {
+        width: 40px;
+        .icon {
+          cursor: pointer;
+          font-size: 14px;
+          margin-right: 6px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/chatdoc/SidePanel.vue b/src/components/chatdoc/SidePanel.vue
index 3f4b5fe..c2f70a4 100644
--- a/src/components/chatdoc/SidePanel.vue
+++ b/src/components/chatdoc/SidePanel.vue
@@ -69,8 +69,7 @@ import { defineComponent } from 'vue';
 import { ElSkeleton, ElInput } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW } from '@/router/constants';
-import { chatdocOperator } from '@/operators';
-import { IChatRepository } from '@/operators/chatdoc/models';
+import { chatdocOperator, IChatdocRepository } from '@/operators';
 import { Status } from '@/store/common/models';
 
 export default defineComponent({
@@ -102,25 +101,25 @@ export default defineComponent({
         name: ROUTE_CHAT_CONVERSATION_NEW
       });
     },
-    async onConfirm(repository: IChatRepository) {
-      if (repository?.deleting) {
-        await chatdocOperator.deleteRepository(repository.id);
-        await this.$store.dispatch('chatdoc/getRepositories');
-      } else if (repository?.editing) {
-        await chatdocOperator.updateRepository(repository);
-        await this.$store.dispatch('chatdoc/getRepositories');
-      } else {
-        repository.editing = true;
-      }
+    async onConfirm(repository: IChatdocRepository) {
+      // if (repository?.deleting) {
+      //   await chatdocOperator.deleteRepository(repository.id);
+      //   await this.$store.dispatch('chatdoc/getRepositories');
+      // } else if (repository?.editing) {
+      //   await chatdocOperator.updateRepository(repository);
+      //   await this.$store.dispatch('chatdoc/getRepositories');
+      // } else {
+      //   repository.editing = true;
+      // }
     },
     onClick(id: string) {
       if (!id) {
         return;
       }
       this.$router.push({
-        name: ROUTE_CHAT_CONVERSATION,
+        name: ROUTE_CHAT_CONVERSATION_NEW,
         params: {
-          id
+          repositoryId: this.repositoryId
         }
       });
       this.$emit('click', id);
diff --git a/src/components/chatdoc/UploadDocument.vue b/src/components/chatdoc/UploadDocument.vue
new file mode 100644
index 0000000..9dea361
--- /dev/null
+++ b/src/components/chatdoc/UploadDocument.vue
@@ -0,0 +1,97 @@
+<template>
+  <el-dialog v-model="dialogVisible">
+    <el-upload
+      v-model:file-list="fileList"
+      accept=".docx,.doc,.pdf,.txt"
+      drag
+      :class="{
+        upload: true
+      }"
+      name="file"
+      :show-file-list="true"
+      :limit="1"
+      :multiple="false"
+      action="/api/v1/files/"
+      :on-exceed="onExceed"
+      :on-error="onError"
+      :on-success="onSuccess"
+      :headers="headers"
+    >
+      <el-icon v-if="!learning" class="el-icon--upload"><upload-filled /></el-icon>
+      <div v-if="!learning" class="el-upload__text">{{ $t('chatdoc.message.dragOrClickToUpload') }}</div>
+      <div v-if="learning">{{ $t('chatdoc.message.learningDocument') }}</div>
+    </el-upload>
+  </el-dialog>
+  <el-button type="primary" @click="dialogVisible = true">{{ $t('chatdoc.button.uploadDocuments') }}</el-button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElButton, ElDialog, ElUpload, ElIcon, ElMessage, UploadFiles } from 'element-plus';
+import { UploadFilled } from '@element-plus/icons-vue';
+
+interface IData {
+  dialogVisible: boolean;
+  fileList: UploadFiles;
+  learning: boolean;
+}
+
+export default defineComponent({
+  name: 'UploadDocument',
+  components: {
+    ElButton,
+    ElDialog,
+    ElUpload,
+    ElIcon,
+    UploadFilled
+  },
+  data(): IData {
+    return {
+      dialogVisible: false,
+      fileList: [],
+      learning: false
+    };
+  },
+  computed: {
+    headers() {
+      return {
+        Authorization: `Bearer ${this.$store.state.token.access}`
+      };
+    },
+    urls(): string[] {
+      // @ts-ignore
+      return this.fileList.map((file: UploadFile) => file?.response?.file_url);
+    }
+  },
+  async mounted() {},
+  methods: {
+    onExceed() {
+      ElMessage.warning(this.$t('chatdoc.message.uploadDocumentsExceed'));
+    },
+    onError() {
+      ElMessage.error(this.$t('chatdoc.message.uploadDocumentsError'));
+    },
+    async onSuccess() {
+      ElMessage.success(this.$t('chatdoc.message.uploadDocumentsSuccess'));
+      ElMessage.info(this.$t('chatdoc.message.startCreateDocument'));
+      this.learning = true;
+      this.$store
+        .dispatch('chatdoc/createDocument', {
+          repositoryId: this.$route.params.repositoryId,
+          fileUrl: this.urls[0],
+          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'));
+        });
+    }
+  }
+});
+</script>
diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue
index 9435cef..bb526e7 100644
--- a/src/components/common/Navigator.vue
+++ b/src/components/common/Navigator.vue
@@ -77,7 +77,7 @@ import { ElButton, ElTooltip, ElMenu, ElMenuItem } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import {
   ROUTE_CHATDOC_INDEX,
-  ROUTE_CHATDOC_CHAT,
+  ROUTE_CHATDOC_CONVERSATION,
   ROUTE_CHATDOC_KNOWLEDGE,
   ROUTE_CHATDOC_SETTING,
   ROUTE_CHAT_CONVERSATION,
@@ -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_CHAT, ROUTE_CHATDOC_KNOWLEDGE, ROUTE_CHATDOC_SETTING]
+        routes: [ROUTE_CHATDOC_INDEX, ROUTE_CHATDOC_CONVERSATION, ROUTE_CHATDOC_KNOWLEDGE, ROUTE_CHATDOC_SETTING]
       });
     }
 
diff --git a/src/i18n/zh/chatdoc/button.ts b/src/i18n/zh/chatdoc/button.ts
new file mode 100644
index 0000000..77d211c
--- /dev/null
+++ b/src/i18n/zh/chatdoc/button.ts
@@ -0,0 +1,3 @@
+export default {
+  uploadDocuments: '上传文档'
+};
diff --git a/src/i18n/zh/chatdoc/field.ts b/src/i18n/zh/chatdoc/field.ts
new file mode 100644
index 0000000..0d46961
--- /dev/null
+++ b/src/i18n/zh/chatdoc/field.ts
@@ -0,0 +1,11 @@
+export default {
+  fileName: '文件名',
+  createdAt: '创建时间',
+  fileExtension: '文件类型',
+  fileUrl: '文件链接',
+  fileSize: '文件大小',
+  state: '状态',
+  stateProcessing: '学习中',
+  stateCompleted: '学习完成',
+  stateFailed: '学习失败'
+};
diff --git a/src/i18n/zh/chatdoc/index.ts b/src/i18n/zh/chatdoc/index.ts
index e59502a..ea8125c 100644
--- a/src/i18n/zh/chatdoc/index.ts
+++ b/src/i18n/zh/chatdoc/index.ts
@@ -1,5 +1,7 @@
 import message from './message';
 import title from './title';
 import nav from './nav';
+import field from './field';
+import button from './button';
 
-export default { message, title, nav };
+export default { message, title, nav, field, button };
diff --git a/src/i18n/zh/chatdoc/message.ts b/src/i18n/zh/chatdoc/message.ts
index 6fc6a63..707f0f7 100644
--- a/src/i18n/zh/chatdoc/message.ts
+++ b/src/i18n/zh/chatdoc/message.ts
@@ -1,31 +1,12 @@
 export default {
-  startNewChat: '开始新的会话',
-  uploadFile: '上传文件',
-  noToken: '请先申请对应服务',
-  newMessagePlaceholder: '请输入你的问题...',
-  noInput: '问题不能为空',
-  uploadReferencesExceed: '最多只能上传 1 个文件',
-  uploadReferencesError: '上传文件失败，请稍后重试',
-  notApplied: '您尚未申请该服务，请先申请',
-  tryForFree: '免费使用',
-  question1: '写一段 JavaScript 代码，输出 Hello World',
-  question2: '写一封邮件给晓伟，告诉他我刚刚搬家了',
-  question3: '用简单的术语解释量子计算的基本原理',
-  question4: '虚拟现实对艺术创作产生了怎样的影响？',
-  question5: '隐私保护和数据安全如何影响法律实践？',
-  question6: '如何应对当今世界复杂的税务法规变化？',
-  question7: '如何结合不同地区的文化背景创作独特美食？',
-  question8: '如何通过旅行体验汲取文学创作灵感？',
-  question9: '如何从不同行业的成功案例中获取商业创意？',
-  errorApiError: '回答失败，请稍后重试',
-  errorBadRequest: '请求内容不规范，请重新提问',
-  errorNoConversation: '对话内容不存在或者已经过期，请发起新的会话',
-  errorContentTooLarge: '问题内容过长，请缩短后重试',
-  errorTooManyRequests: '您的操作过于频繁，请稍后重试',
-  errorUsedUp: '您的套餐次数已经用完，请购买更多次数继续使用',
-  errorUnknown: '服务器出现未知错误，请稍后重试或联系客服',
-  errorTimeout: '回答问题超时，请稍后重试',
-  errorNotApplied: '您尚未申请该服务，请先申请再继续提问',
-  confirmDelete: '确定删除',
-  howToUse: '按 Shift+Enter 键可以换行'
+  introductionForKnowledge: '知识库中可添加文档，在机器人回答时，可运用库中的知识进行回复。',
+  uploadDocumentsExceed: '上传文档数量超过限制',
+  uploadDocumentsError: '上传文档失败',
+  uploadDocumentsSuccess: '上传文档成功',
+  createDocumentSuccess: '录入文档成功',
+  startCreateDocument: '开始录入文档...',
+  createDocumentError: '录入文档失败',
+  dragOrClickToUpload: '拖拽或点击上传',
+  learningDocument: '学习中，请稍后...',
+  startNewChat: '开始新会话'
 };
diff --git a/src/i18n/zh/chatdoc/title.ts b/src/i18n/zh/chatdoc/title.ts
index 49a3fb8..48dd644 100644
--- a/src/i18n/zh/chatdoc/title.ts
+++ b/src/i18n/zh/chatdoc/title.ts
@@ -1,9 +1,3 @@
 export default {
-  chat: 'AI问答',
-  example: '样例',
-  capabilities: '功能',
-  limitations: '限制',
-  complexQuestion: '解答复杂问题',
-  professionalQuestion: '咨询专业问题',
-  getTips: '获取灵感创意'
+  knowledge: '我的知识库'
 };
diff --git a/src/layouts/Chatdoc.vue b/src/layouts/Chatdoc.vue
index 6c38652..f3ea070 100644
--- a/src/layouts/Chatdoc.vue
+++ b/src/layouts/Chatdoc.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-    <el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" class="menu">
+    <el-menu v-if="repositoryId" :default-active="activeMenu" mode="horizontal" :ellipsis="false" class="menu">
       <el-menu-item
         v-for="(menuItem, menuItemIndex) in menuItems"
         :key="menuItemIndex"
@@ -19,7 +19,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { ElMenu, ElMenuItem } from 'element-plus';
-import { ROUTE_CHATDOC_CHAT, ROUTE_CHATDOC_KNOWLEDGE, ROUTE_CHATDOC_SETTING } from '@/router';
+import {
+  ROUTE_CHATDOC_CONVERSATION,
+  ROUTE_CHATDOC_CONVERSATION_NEW,
+  ROUTE_CHATDOC_KNOWLEDGE,
+  ROUTE_CHATDOC_SETTING
+} from '@/router';
 import { RouteLocationRaw } from 'vue-router';
 
 interface IMenuItem {
@@ -29,6 +34,7 @@ interface IMenuItem {
 }
 
 interface IData {
+  repositoryId: string;
   drawer: boolean;
   activeMenu: string | undefined;
   menuItems: IMenuItem[];
@@ -42,6 +48,7 @@ export default defineComponent({
   },
   data(): IData {
     return {
+      repositoryId: this.$route.params?.repositoryId?.toString(),
       drawer: false,
       activeMenu: undefined,
       menuItems: [
@@ -49,9 +56,10 @@ export default defineComponent({
           index: 'chat',
           title: this.$t('chatdoc.nav.chat'),
           route: {
-            name: ROUTE_CHATDOC_CHAT
+            name: ROUTE_CHATDOC_CONVERSATION_NEW
           }
         },
+        /*
         {
           index: 'setting',
           title: this.$t('chatdoc.nav.setting'),
@@ -59,6 +67,7 @@ export default defineComponent({
             name: ROUTE_CHATDOC_SETTING
           }
         },
+        */
         {
           index: 'knowledge',
           title: this.$t('chatdoc.nav.knowledge'),
@@ -83,7 +92,13 @@ export default defineComponent({
     async onClickMenu(menuItem: IMenuItem) {
       this.activeMenu = menuItem.index;
       if (menuItem.route) {
-        await this.$router.push(menuItem.route);
+        await this.$router.push({
+          // @ts-ignore
+          ...menuItem.route,
+          params: {
+            id: this.id
+          }
+        });
       }
     }
   }
@@ -103,12 +118,10 @@ export default defineComponent({
 
   .chatdoc {
     height: 100%;
-    padding: 15px;
     flex: 1;
-    width: calc(100% - 300px);
-    height: 100%;
+    width: 100%;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
   }
 }
 </style>
diff --git a/src/operators/chatdoc/models.ts b/src/operators/chatdoc/models.ts
index c864f8c..dbd5101 100644
--- a/src/operators/chatdoc/models.ts
+++ b/src/operators/chatdoc/models.ts
@@ -4,7 +4,10 @@ export interface IChatdocRepository {
   id: string;
   name?: string;
   description?: string;
+  deleting?: boolean;
+  editing?: boolean;
   documents?: IChatdocDocument[];
+  conversations?: IChatdocConversation[];
 }
 
 export interface IChatdocDocument {
@@ -14,6 +17,14 @@ export interface IChatdocDocument {
   file_name: string;
 }
 
+export interface IChatdocConversation {
+  id: string;
+  repository_id: string;
+  messages: IChatdocMessage[];
+  editing?: boolean;
+  deleting?: boolean;
+}
+
 export interface IChatdocMessage {
   content?: string;
   role?: typeof ROLE_SYSTEM | typeof ROLE_ASSISTANT | typeof ROLE_USER;
@@ -33,6 +44,8 @@ export interface IChatdocDocumentRequest extends IChatdocDocument {
 
 export interface IChatdocDocumentResponse extends IChatdocDocument {}
 
+export type IChatdocConversationsResponse = IChatdocConversation[];
+
 export interface IChatdocRepositoryRequest extends IChatdocRepository {
   action: typeof ACTION_CREATE | typeof ACTION_UPDATE | typeof ACTION_DELETE;
 }
diff --git a/src/operators/chatdoc/operator.ts b/src/operators/chatdoc/operator.ts
index 4391de8..d97c7d4 100644
--- a/src/operators/chatdoc/operator.ts
+++ b/src/operators/chatdoc/operator.ts
@@ -1,12 +1,14 @@
 import axios, { AxiosProgressEvent, AxiosResponse } from 'axios';
 import {
   IChatdocChatResponse,
+  IChatdocConversation,
+  IChatdocConversationsResponse,
   IChatdocDocumentResponse,
   IChatdocDocumentsResponse,
   IChatdocRepositoriesResponse,
   IChatdocRepositoryResponse
 } from './models';
-import { ACTION_RETRIEVE_ALL, BASE_URL_API } from '@/constants';
+import { ACTION_RETRIEVE_ALL, ACTION_UPDATE, BASE_URL_API } from '@/constants';
 import { ACTION_CREATE, ACTION_DELETE, ACTION_RETRIEVE, ACTION_RETRIEVE_BATCH } from '@/constants';
 
 class ChatdocOperator {
@@ -101,6 +103,23 @@ class ChatdocOperator {
     );
   }
 
+  async getAllConversations(repositoryId: string): Promise<AxiosResponse<IChatdocConversationsResponse>> {
+    return await axios.post(
+      `/chatdoc/conversations`,
+      {
+        action: ACTION_RETRIEVE_ALL,
+        repository_id: repositoryId
+      },
+      {
+        headers: {
+          accept: 'application/json',
+          'content-type': 'application/json'
+        },
+        baseURL: BASE_URL_API
+      }
+    );
+  }
+
   async getRepositories(ids: string[]): Promise<AxiosResponse<IChatdocRepositoriesResponse>> {
     return await axios.post(
       `/chatdoc/repositories`,
@@ -119,14 +138,20 @@ class ChatdocOperator {
   }
 
   async createDocument(
-    repositoryId: string,
+    payload: {
+      repositoryId: string;
+      fileUrl: string;
+      fileName: string;
+    },
     options: { token: string }
   ): Promise<AxiosResponse<IChatdocDocumentResponse>> {
     return await axios.post(
       `/chatdoc/documents`,
       {
         action: ACTION_CREATE,
-        repository_id: repositoryId
+        repository_id: payload.repositoryId,
+        file_url: payload.fileUrl,
+        file_name: payload.fileName
       },
       {
         headers: {
@@ -157,6 +182,24 @@ class ChatdocOperator {
     );
   }
 
+  async retrieveConversation(id: string, options: { token: string }): Promise<AxiosResponse<IChatdocDocumentResponse>> {
+    return await axios.post(
+      `/chatdoc/conversations`,
+      {
+        action: ACTION_RETRIEVE,
+        id
+      },
+      {
+        headers: {
+          authorization: `Bearer ${options.token}`,
+          accept: 'application/json',
+          'content-type': 'application/json'
+        },
+        baseURL: BASE_URL_API
+      }
+    );
+  }
+
   async deleteDocument(id: string, options: { token: string }): Promise<AxiosResponse<IChatdocDocumentResponse>> {
     return await axios.post(
       `/chatdoc/documents`,
@@ -175,6 +218,41 @@ class ChatdocOperator {
     );
   }
 
+  async updateConversation(payload: IChatdocConversation) {
+    return await axios.post(
+      `/chatdoc/conversations`,
+      {
+        action: ACTION_UPDATE,
+        id: payload.id,
+        messages: payload.messages
+      },
+      {
+        headers: {
+          accept: 'application/json',
+          'content-type': 'application/json'
+        },
+        baseURL: BASE_URL_API
+      }
+    );
+  }
+
+  async deleteConversation(id: string): Promise<AxiosResponse<IChatdocDocumentResponse>> {
+    return await axios.post(
+      `/chatdoc/conversations`,
+      {
+        action: ACTION_DELETE,
+        id
+      },
+      {
+        headers: {
+          accept: 'application/json',
+          'content-type': 'application/json'
+        },
+        baseURL: BASE_URL_API
+      }
+    );
+  }
+
   async chat(
     repositoryId: string,
     options: { token: string; stream: (response: IChatdocChatResponse) => void }
diff --git a/src/pages/chatdoc/Chat.vue b/src/pages/chatdoc/Chat.vue
deleted file mode 100644
index 05fb600..0000000
--- a/src/pages/chatdoc/Chat.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <layout>
-    <template #chatdoc> Chat </template>
-  </layout>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import Layout from '@/layouts/Chatdoc.vue';
-
-export default defineComponent({
-  name: 'ChatdocChat',
-  components: {
-    Layout
-  },
-  data() {
-    return {};
-  },
-  async mounted() {},
-  methods: {}
-});
-</script>
diff --git a/src/pages/chatdoc/Conversation.vue b/src/pages/chatdoc/Conversation.vue
new file mode 100644
index 0000000..2d5a3c7
--- /dev/null
+++ b/src/pages/chatdoc/Conversation.vue
@@ -0,0 +1,64 @@
+<template>
+  <layout>
+    <template #chatdoc>
+      <div class="wrapper">
+        <conversations class="side" />
+        <div class="chat"></div>
+      </div>
+    </template>
+  </layout>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Layout from '@/layouts/Chatdoc.vue';
+import { IChatdocRepository } from '@/operators';
+import Conversations from '@/components/chatdoc/Conversations.vue';
+
+export default defineComponent({
+  name: 'ChatdocChat',
+  components: {
+    Layout,
+    Conversations
+  },
+  data() {
+    return {
+      loading: false,
+      repositoryId: this.$route.params.repositoryId.toString()
+    };
+  },
+  computed: {
+    repository(): IChatdocRepository | undefined {
+      return this.$store.state?.chatdoc?.repositories?.find((repository) => repository.id === this.id);
+    },
+    conversations() {
+      return this.repository?.conversations;
+    }
+  },
+  async mounted() {
+    console.log('start get conversations');
+    this.loading = true;
+    this.$store
+      .dispatch('chatdoc/getConversations', { repositoryId: this.repositoryId })
+      .then(() => {
+        this.loading = false;
+      })
+      .catch(() => {
+        this.loading = false;
+      });
+  },
+  methods: {}
+});
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+.chat {
+  flex: 1;
+  width: calc(100% - 300px);
+}
+</style>
diff --git a/src/pages/chatdoc/Index.vue b/src/pages/chatdoc/Index.vue
index e8df567..bfec971 100644
--- a/src/pages/chatdoc/Index.vue
+++ b/src/pages/chatdoc/Index.vue
@@ -66,7 +66,7 @@ export default defineComponent({
       this.$router.push({
         name: ROUTE_CHATDOC_KNOWLEDGE,
         params: {
-          id: repository.id
+          repositoryId: repository.id
         }
       });
     }
diff --git a/src/pages/chatdoc/Knowledge.vue b/src/pages/chatdoc/Knowledge.vue
index 7c544be..a05c9a0 100644
--- a/src/pages/chatdoc/Knowledge.vue
+++ b/src/pages/chatdoc/Knowledge.vue
@@ -1,11 +1,53 @@
 <template>
   <layout>
     <template #chatdoc>
-      <el-button @click="onUpload">upload</el-button>
-      <el-card v-for="(document, documentIndex) in documents" :key="documentIndex" class="document">
-        {{ document.id }}
-      </el-card>
-      <el-alert v-if="documents?.length === 0" type="info" description="no documents" />
+      <div class="wrapper">
+        <div class="title">
+          {{ $t('chatdoc.title.knowledge') }}
+        </div>
+        <div class="introduction">
+          {{ $t('chatdoc.message.introductionForKnowledge') }}
+        </div>
+        <div class="operations">
+          <upload-document />
+        </div>
+        <div class="documents">
+          <el-table :data="documents" border>
+            <el-table-column prop="id" label="ID" />
+            <el-table-column prop="file_name" :label="$t('chatdoc.field.fileName')" />
+            <el-table-column :label="$t('chatdoc.field.fileExtension')">
+              <template #default="scope">
+                {{ scope.row.file_name.split('.').pop() }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('chatdoc.field.createdAt')">
+              <template #default="scope">
+                {{ scope.row.created_at ? $dayjs.format(scope.row.created_at) : '' }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('chatdoc.field.state')">
+              <template #default="scope">
+                <el-tag v-if="scope.row.state === 'processing'" type="info">
+                  {{ $t('chatdoc.field.stateProcessing') }}
+                </el-tag>
+                <el-tag v-if="scope.row.state === 'failed'" type="danger">
+                  {{ $t('chatdoc.field.stateFailed') }}
+                </el-tag>
+                <el-tag v-if="scope.row.state === 'completed'" type="success">
+                  {{ $t('chatdoc.field.stateCompleted') }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column>
+              <template #default="scope">
+                <el-button type="danger" @click="onDelete(scope.row.id)">
+                  {{ $t('common.button.delete') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
     </template>
   </layout>
 </template>
@@ -14,34 +56,38 @@
 import { defineComponent } from 'vue';
 import Layout from '@/layouts/Chatdoc.vue';
 import { IChatdocRepository } from '@/operators';
-import { ElCard, ElButton, ElAlert } from 'element-plus';
+import { ElButton, ElTag, ElTable, ElTableColumn } from 'element-plus';
+import UploadDocument from '@/components/chatdoc/UploadDocument.vue';
 
 export default defineComponent({
   name: 'ChatdocKnowledge',
   components: {
     Layout,
     ElButton,
-    ElCard,
-    ElAlert
+    ElTable,
+    ElTag,
+    ElTableColumn,
+    UploadDocument
   },
   data() {
     return {
       loading: false,
-      id: this.$route.params.id.toString()
+      repositoryId: this.$route.params.repositoryId.toString()
     };
   },
   computed: {
     repository(): IChatdocRepository | undefined {
-      return this.$store.state?.chatdoc?.repositories?.find((repository) => repository.id === this.id);
+      return this.$store.state?.chatdoc?.repositories?.find((repository) => repository.id === this.repositoryId);
     },
     documents() {
       return this.repository?.documents;
     }
   },
   async mounted() {
+    console.log('start get documents');
     this.loading = true;
     this.$store
-      .dispatch('chatdoc/getDocuments', { repositoryId: this.id })
+      .dispatch('chatdoc/getDocuments', { repositoryId: this.repositoryId })
       .then(() => {
         this.loading = false;
       })
@@ -52,7 +98,34 @@ export default defineComponent({
   methods: {
     onUpload() {
       console.log('onUpload');
+    },
+    onDelete(id: string) {
+      console.log('onDelete', id);
     }
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+}
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.introduction {
+  margin-bottom: 20px;
+}
+
+.operations {
+  margin-bottom: 20px;
+}
+.documents {
+  width: 100%;
+}
+</style>
diff --git a/src/router/chatdoc.ts b/src/router/chatdoc.ts
index 496728d..50c48e1 100644
--- a/src/router/chatdoc.ts
+++ b/src/router/chatdoc.ts
@@ -1,4 +1,10 @@
-import { ROUTE_CHATDOC_CHAT, ROUTE_CHATDOC_INDEX, ROUTE_CHATDOC_KNOWLEDGE, ROUTE_CHATDOC_SETTING } from './constants';
+import {
+  ROUTE_CHATDOC_CONVERSATION,
+  ROUTE_CHATDOC_CONVERSATION_NEW,
+  ROUTE_CHATDOC_INDEX,
+  ROUTE_CHATDOC_KNOWLEDGE,
+  ROUTE_CHATDOC_SETTING
+} from './constants';
 
 export default {
   path: '/chatdoc',
@@ -13,17 +19,22 @@ export default {
       component: () => import('@/pages/chatdoc/Index.vue')
     },
     {
-      path: 'chat',
-      name: ROUTE_CHATDOC_CHAT,
-      component: () => import('@/pages/chatdoc/Chat.vue')
+      path: 'repository/:repositoryId/conversation',
+      name: ROUTE_CHATDOC_CONVERSATION_NEW,
+      component: () => import('@/pages/chatdoc/Conversation.vue')
     },
     {
-      path: 'knowledge/:id',
+      path: 'repository/:repositoryId/conversation/:conversationId',
+      name: ROUTE_CHATDOC_CONVERSATION,
+      component: () => import('@/pages/chatdoc/Conversation.vue')
+    },
+    {
+      path: 'repository/:repositoryId/knowledge',
       name: ROUTE_CHATDOC_KNOWLEDGE,
       component: () => import('@/pages/chatdoc/Knowledge.vue')
     },
     {
-      path: 'setting',
+      path: 'repository/:repositoryId',
       name: ROUTE_CHATDOC_SETTING,
       component: () => import('@/pages/chatdoc/Setting.vue')
     }
diff --git a/src/router/constants.ts b/src/router/constants.ts
index c33ad12..ca47b7c 100644
--- a/src/router/constants.ts
+++ b/src/router/constants.ts
@@ -10,7 +10,8 @@ export const ROUTE_MIDJOURNEY_INDEX = 'midjourney-index';
 export const ROUTE_MIDJOURNEY_HISTORY = 'midjourney-history';
 
 export const ROUTE_CHATDOC_INDEX = 'chatdoc-index';
-export const ROUTE_CHATDOC_CHAT = 'chatdoc-chat';
+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';
 
diff --git a/src/store/chatdoc/actions.ts b/src/store/chatdoc/actions.ts
index b91c122..72fcdf7 100644
--- a/src/store/chatdoc/actions.ts
+++ b/src/store/chatdoc/actions.ts
@@ -3,7 +3,7 @@ import { IRootState, Status } from '../common/models';
 import { ActionContext } from 'vuex';
 import { log } from '@/utils/log';
 import { IChatdocState } from './models';
-import { IChatdocDocument, IChatdocRepository } from '@/operators/chatdoc/models';
+import { IChatdocConversation, IChatdocDocument, IChatdocRepository } from '@/operators/chatdoc/models';
 import { chatdocOperator } from '@/operators/chatdoc/operator';
 import {
   API_ID_CHATDOC_CHAT,
@@ -67,6 +67,34 @@ export const getRepositories = async ({
   return repositories;
 };
 
+export const createDocument = async (
+  { state }: ActionContext<IChatdocState, IRootState>,
+  payload: {
+    repositoryId: string;
+    fileUrl: string;
+    fileName: string;
+  }
+): Promise<IChatdocDocument> => {
+  log(createDocument, 'start to create document');
+  const applications = state.applications;
+  console.log('applications', applications);
+  const application = applications?.find(
+    (application: IApplication) => application.api?.id === API_ID_CHATDOC_DOCUMENTS
+  );
+  console.log('application', application);
+  const token = application?.credential?.token;
+  if (!token) {
+    return Promise.reject('no token');
+  }
+  const document = (
+    await chatdocOperator.createDocument(payload, {
+      token
+    })
+  ).data;
+  log(createDocument, 'create document success', document);
+  return document;
+};
+
 export const getDocuments = async (
   { commit, state }: ActionContext<IChatdocState, IRootState>,
   payload: { repositoryId: string }
@@ -77,7 +105,7 @@ export const getDocuments = async (
   const application = applications?.find(
     (application: IApplication) => application.api?.id === API_ID_CHATDOC_DOCUMENTS
   );
-  console.log('application', application);
+  console.log('application for getDocuments', application);
   const token = application?.credential?.token;
   if (!token) {
     commit('setRepository', {
@@ -94,11 +122,37 @@ export const getDocuments = async (
   log(getRepositories, 'get documents success', documents);
   commit('setRepository', {
     id: payload.repositoryId,
-    documents: []
+    documents: documents
   });
   return documents;
 };
 
+export const getConversations = async (
+  { commit, state }: ActionContext<IChatdocState, IRootState>,
+  payload: { repositoryId: string }
+): Promise<IChatdocConversation[]> => {
+  log(getConversations, 'start to get conversations');
+  const applications = state.applications;
+  console.log('applications', applications);
+  const application = applications?.find((application: IApplication) => application.api?.id === API_ID_CHATDOC_CHAT);
+  console.log('application for getConversations', application);
+  const token = application?.credential?.token;
+  if (!token) {
+    commit('setRepository', {
+      id: payload.repositoryId,
+      conversations: []
+    });
+    return [];
+  }
+  const conversations = (await chatdocOperator.getAllConversations(payload.repositoryId)).data;
+  log(getConversations, 'get conversations success', conversations);
+  commit('setRepository', {
+    id: payload.repositoryId,
+    conversations: conversations
+  });
+  return conversations;
+};
+
 export const getRepository = async (
   { commit, state }: ActionContext<IChatdocState, IRootState>,
   payload: { id: string }
@@ -131,5 +185,8 @@ export default {
   getRepositories,
   getRepository,
   setRepository,
-  resetAll
+  getConversations,
+  getDocuments,
+  resetAll,
+  createDocument
 };
diff --git a/src/store/chatdoc/mutations.ts b/src/store/chatdoc/mutations.ts
index b3a6528..55d90c5 100644
--- a/src/store/chatdoc/mutations.ts
+++ b/src/store/chatdoc/mutations.ts
@@ -2,6 +2,7 @@ import { IApplication, IChatConversation, IChatModel } from '@/operators';
 import { IChatdocState } from './models';
 import { Status } from '../common/models';
 import { IChatdocRepository } from '@/operators/chatdoc/models';
+import { log } from '@/utils';
 
 export const resetAll = (state: IChatdocState): void => {
   state.applications = [];
@@ -17,21 +18,45 @@ export const setGetApplicationsStatus = (state: IChatdocState, payload: Status):
 };
 
 export const setRepositories = (state: IChatdocState, payload: IChatdocRepository[]): void => {
-  state.repositories = payload;
+  const currentRepositories = state.repositories;
+  if (currentRepositories) {
+    // update the repositories
+    payload.forEach((repository: IChatdocRepository) => {
+      const index = currentRepositories.findIndex((item: IChatdocRepository) => item.id === repository.id);
+      if (index !== -1) {
+        currentRepositories[index] = {
+          ...currentRepositories[index],
+          ...repository
+        };
+      }
+    });
+    state.repositories = currentRepositories;
+    return;
+  } else {
+    // set the repositories
+    state.repositories = payload;
+  }
 };
 
-export const setRepository = (state: IChatdocState, payload: { repository: IChatdocRepository }): void => {
+export const setRepository = (state: IChatdocState, payload: IChatdocRepository): void => {
+  log(setRepository, 'mutation', payload);
   // find the repository and set it
-  const { repository } = payload;
+  const repository = payload;
   const repositories = state.repositories;
   if (!repositories) {
+    log(setRepository, 'no repositories');
     return;
   }
   const index = repositories.findIndex((item: IChatdocRepository) => item.id === repository.id);
   if (index === -1) {
+    log(setRepository, 'no repository found');
     return;
   }
-  repositories[index] = repository;
+  log(setRepository, 'set repository for index', index, repository);
+  repositories[index] = {
+    ...repositories[index],
+    ...repository
+  };
 };
 
 export const setGetRepositoriesStatus = (state: IChatdocState, payload: Status): void => {
diff --git a/src/store/chatdoc/persist.ts b/src/store/chatdoc/persist.ts
new file mode 100644
index 0000000..aae5063
--- /dev/null
+++ b/src/store/chatdoc/persist.ts
@@ -0,0 +1 @@
+export default ['chatdoc.repositories', 'chatdoc.applications'];
diff --git a/src/store/index.ts b/src/store/index.ts
index 93d7a4a..afeb697 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -6,6 +6,7 @@ import chatdoc from './chatdoc';
 import root from './common';
 import persistChat from './chat/persist';
 import persistMidjourney from './midjourney/persist';
+import persistChatdoc from './chatdoc/persist';
 import persistRoot from './common/persist';
 
 const store = createStore({
@@ -17,7 +18,7 @@ const store = createStore({
   },
   plugins: [
     createPersistedState({
-      paths: [...persistRoot, ...persistChat, ...persistMidjourney]
+      paths: [...persistRoot, ...persistChat, ...persistMidjourney, ...persistChatdoc]
     })
   ]
 });