From 7228c17d9ec11935719e125fc6987b85a7284485 Mon Sep 17 00:00:00 2001
From: Germey <germey@acedata.cloud>
Date: Sun, 17 Mar 2024 21:26:18 +0800
Subject: [PATCH 1/3] update

---
 src/components/chatdoc/UploadDocument.vue |  1 +
 src/models/chatdoc.ts                     | 54 +++++++------
 src/operators/auth.ts                     |  2 +-
 src/operators/chatdoc.ts                  | 14 ++--
 src/operators/user.ts                     | 10 +--
 src/pages/chatdoc/Conversation.vue        | 30 +++-----
 src/store/chatdoc/actions.ts              | 18 ++---
 vite.config.ts                            | 93 +++++++++++++----------
 8 files changed, 120 insertions(+), 102 deletions(-)

diff --git a/src/components/chatdoc/UploadDocument.vue b/src/components/chatdoc/UploadDocument.vue
index da6e0278..ff362ed5 100644
--- a/src/components/chatdoc/UploadDocument.vue
+++ b/src/components/chatdoc/UploadDocument.vue
@@ -88,6 +88,7 @@ export default defineComponent({
           ElMessage.success(this.$t('chatdoc.message.createDocumentSuccess'));
           this.dialogVisible = false;
           this.$store.dispatch('chatdoc/getDocuments', { repositoryId: this.$route.params.repositoryId });
+          this.$store.dispatch('chatdoc/getApplication');
         })
         .catch(() => {
           ElMessage.error(this.$t('chatdoc.message.createDocumentError'));
diff --git a/src/models/chatdoc.ts b/src/models/chatdoc.ts
index d54e6d98..17ed38c3 100644
--- a/src/models/chatdoc.ts
+++ b/src/models/chatdoc.ts
@@ -15,6 +15,16 @@ export interface IChatdocRepository {
   conversations?: IChatdocConversation[];
 }
 
+export interface IChatdocRepositoryRequest extends IChatdocRepository {
+  action: typeof ACTION_CREATE | typeof ACTION_UPDATE | typeof ACTION_DELETE;
+}
+
+export interface IChatdocRepositoryResponse extends IChatdocRepository {}
+export type IChatdocRepositoriesResponse = {
+  items: IChatdocRepository[];
+  count: number;
+};
+
 export interface IChatdocDocument {
   id: string;
   repository_id: string;
@@ -22,10 +32,23 @@ export interface IChatdocDocument {
   file_name: string;
 }
 
+export interface IChatdocDocumentRequest extends IChatdocDocument {
+  action: typeof ACTION_CREATE | typeof ACTION_UPDATE | typeof ACTION_DELETE;
+  callback_url?: string;
+}
+
+export interface IChatdocDocumentResponse extends IChatdocDocument {}
+
+export type IChatdocDocumentsResponse = {
+  items: IChatdocDocument[];
+  count: number;
+};
+
 export interface IChatdocConversation {
   id: string;
   repository_id: string;
   messages: IChatdocMessage[];
+  question: string;
   editing?: boolean;
   deleting?: boolean;
 }
@@ -44,36 +67,21 @@ export enum IChatdocMessageState {
   FAILED = 'failed'
 }
 
-export interface IChatdocChatRequest {
+export interface IChatdocConversationRequest {
+  id: string;
   repository_id: string;
-  messages: IChatdocMessage[];
+  question: string;
   temperature?: number;
   knowledge_fallback?: boolean;
 }
 
-export interface IChatdocDocumentRequest extends IChatdocDocument {
-  action: typeof ACTION_CREATE | typeof ACTION_UPDATE | typeof ACTION_DELETE;
-  callback_url?: string;
-}
-
-export interface IChatdocDocumentResponse extends IChatdocDocument {}
-
-export type IChatdocConversationsResponse = IChatdocConversation[];
-
-export interface IChatdocRepositoryRequest extends IChatdocRepository {
-  action: typeof ACTION_CREATE | typeof ACTION_UPDATE | typeof ACTION_DELETE;
-}
-
-export interface IChatdocRepositoryResponse extends IChatdocRepository {}
-export type IChatdocRepositoriesResponse = {
-  items: IChatdocRepository[];
+export type IChatdocConversationsResponse = {
+  items: IChatdocConversation[];
   count: number;
 };
-export type IChatdocDocumentsResponse = IChatdocDocument[];
 
-export interface IChatdocChatResponse {
+export interface IChatdocConversationResponse {
+  id: string;
   answer: string;
-  delta_answer: string;
-  repository_id?: string;
-  conversation_id?: string;
+  delta_answer?: string;
 }
diff --git a/src/operators/auth.ts b/src/operators/auth.ts
index 8fa249bb..036d8b1f 100644
--- a/src/operators/auth.ts
+++ b/src/operators/auth.ts
@@ -5,7 +5,7 @@ import { getBaseUrlAuth } from '@/utils';
 
 class AuthOperator {
   async refreshToken(payload: IToken): Promise<AxiosResponse<ITokenResponse>> {
-    return httpClient.post('/token/refresh/', payload);
+    return httpClient.post('/auth/refresh/', payload);
   }
 }
 
diff --git a/src/operators/chatdoc.ts b/src/operators/chatdoc.ts
index f207d687..5c28130f 100644
--- a/src/operators/chatdoc.ts
+++ b/src/operators/chatdoc.ts
@@ -111,7 +111,10 @@ class ChatdocOperator {
     );
   }
 
-  async getAllConversations(repositoryId: string): Promise<AxiosResponse<IChatdocConversationsResponse>> {
+  async getAllConversations(
+    repositoryId: string,
+    options: { token: string }
+  ): Promise<AxiosResponse<IChatdocConversationsResponse>> {
     return await axios.post(
       `/chatdoc/conversations`,
       {
@@ -120,6 +123,7 @@ class ChatdocOperator {
       },
       {
         headers: {
+          authorization: `Bearer ${options.token}`,
           accept: 'application/json',
           'content-type': 'application/json'
         },
@@ -273,16 +277,16 @@ class ChatdocOperator {
     );
   }
 
-  async chat(
-    payload: { repositoryId: string; question: string; conversationId?: string; knowledgeFallback?: boolean },
+  async chatConversation(
+    payload: { repositoryId: string; question: string; id?: string; knowledgeFallback?: boolean },
     options: { token: string; stream: (response: IChatdocChatResponse) => void }
   ): Promise<AxiosResponse<IChatdocChatResponse>> {
     return await axios.post(
-      `/chatdoc/chat`,
+      `/chatdoc/conversations`,
       {
         repository_id: payload.repositoryId,
         question: payload.question,
-        conversation_id: payload.conversationId,
+        id: payload.id,
         stateful: true
       },
       {
diff --git a/src/operators/user.ts b/src/operators/user.ts
index 5defce45..477fa450 100644
--- a/src/operators/user.ts
+++ b/src/operators/user.ts
@@ -10,25 +10,25 @@ export interface IInviteesQuery {
 
 class UserOperator {
   async getMe(): Promise<AxiosResponse<IUserDetailResponse>> {
-    return httpClient.get('/me');
+    return httpClient.get('/users/me');
   }
 
   async getInvitees(query: IInviteesQuery): Promise<AxiosResponse<IUserListResponse>> {
-    return httpClient.get('/me/invitees', {
+    return httpClient.get('/users/me/invitees', {
       params: query
     });
   }
 
   async updateMe(data: IUser): Promise<AxiosResponse<IUserDetailResponse>> {
-    return httpClient.put('/me', data);
+    return httpClient.put('/users/me', data);
   }
 
   async getVerify(): Promise<AxiosResponse<IUserDetailResponse>> {
-    return httpClient.get('/verify');
+    return httpClient.get('/users/verify');
   }
 
   async updateVerify(data: IUser): Promise<AxiosResponse<IUserDetailResponse>> {
-    return httpClient.put('/verify', data);
+    return httpClient.put('/users/verify', data);
   }
 }
 
diff --git a/src/pages/chatdoc/Conversation.vue b/src/pages/chatdoc/Conversation.vue
index 6f7e1b18..e959d1f0 100644
--- a/src/pages/chatdoc/Conversation.vue
+++ b/src/pages/chatdoc/Conversation.vue
@@ -55,12 +55,12 @@ import { log } from '@/utils';
 import { ROUTE_CHATDOC_CONVERSATION } from '@/router';
 import axios from 'axios';
 import { isJSONString } from '@/utils/is';
-import { Status } from '@/models';
+import { IService, Status } from '@/models';
 import ApplicationStatus from '@/components/application/Status.vue';
-import { IChatdocChatResponse, IChatdocConversation, IChatdocMessageState, IChatdocRepository } from '@/models';
+import { IChatdocConversationResponse, IChatdocConversation, IChatdocMessageState, IChatdocRepository } from '@/models';
 
 export default defineComponent({
-  name: 'ChatdocChat',
+  name: 'ChatdocConversation',
   components: {
     Layout,
     Conversations,
@@ -92,7 +92,7 @@ export default defineComponent({
     repository(): IChatdocRepository | undefined {
       return this.$store.state?.chatdoc?.repositories?.find((repository) => repository.id === this.repositoryId);
     },
-    conversations() {
+    conversations(): IChatdocConversation[] | undefined {
       return this.repository?.conversations;
     },
     conversationId(): string | undefined {
@@ -107,21 +107,16 @@ export default defineComponent({
     initializing() {
       return this.$store.state.chatdoc.status.getApplication === Status.Request;
     },
-    service() {
+    service(): IService | undefined {
       return this.$store.state.chatdoc.service;
     }
   },
   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;
-      });
+    this.$store.dispatch('chatdoc/getConversations', { repositoryId: this.repositoryId }).finally(() => {
+      this.loading = false;
+    });
   },
   methods: {
     async onSubmit() {
@@ -129,7 +124,6 @@ export default defineComponent({
         content: this.question,
         role: ROLE_USER
       });
-      console.debug('onSubmit', this.question);
       await this.onFetchAnswer();
     },
     async onScrollDown() {
@@ -169,21 +163,21 @@ export default defineComponent({
       // request server to get answer
       this.answering = true;
       chatdocOperator
-        .chat(
+        .chatConversation(
           {
             repositoryId: this.repositoryId,
             question,
-            conversationId: this.conversationId
+            id: this.conversationId
           },
           {
             token,
-            stream: (response: IChatdocChatResponse) => {
+            stream: (response: IChatdocConversationResponse) => {
               this.messages[this.messages.length - 1] = {
                 role: ROLE_ASSISTANT,
                 content: response.answer,
                 state: IChatdocMessageState.ANSWERING
               };
-              conversationId = response.conversation_id;
+              conversationId = response.id;
               this.onScrollDown();
             }
           }
diff --git a/src/store/chatdoc/actions.ts b/src/store/chatdoc/actions.ts
index 8cf2dfc0..7db21369 100644
--- a/src/store/chatdoc/actions.ts
+++ b/src/store/chatdoc/actions.ts
@@ -2,15 +2,7 @@ import { IRootState } from '../common/models';
 import { ActionContext } from 'vuex';
 import { log } from '@/utils/log';
 import { IChatdocState } from './models';
-import {
-  IApplication,
-  IChatdocConversation,
-  IChatdocDocument,
-  IChatdocRepositoriesResponse,
-  IChatdocRepository,
-  IService,
-  Status
-} from '@/models';
+import { IApplication, IChatdocConversation, IChatdocDocument, IChatdocRepository, IService, Status } from '@/models';
 import { chatdocOperator, applicationOperator, serviceOperator } from '@/operators';
 import { CHATDOC_SERVICE_ID } from '@/constants';
 
@@ -195,7 +187,7 @@ export const getDocuments = async (
     await chatdocOperator.getAllDocuments(payload.repositoryId, {
       token
     })
-  ).data;
+  ).data.items;
   log(getRepositories, 'get documents success', documents);
   commit('setRepository', {
     id: payload.repositoryId,
@@ -219,7 +211,11 @@ export const getConversations = async (
     });
     return [];
   }
-  const conversations = (await chatdocOperator.getAllConversations(payload.repositoryId)).data;
+  const conversations = (
+    await chatdocOperator.getAllConversations(payload.repositoryId, {
+      token
+    })
+  ).data.items;
   log(getConversations, 'get conversations success', conversations);
   commit('setRepository', {
     id: payload.repositoryId,
diff --git a/vite.config.ts b/vite.config.ts
index c305ecab..174200bf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,50 +1,65 @@
-import { defineConfig } from 'vite';
+import { ConfigEnv, defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import replace from '@rollup/plugin-replace';
 import { string } from 'rollup-plugin-string';
 import * as path from 'path';
 
-export default defineConfig({
-  server: {
-    host: 'localhost',
-    port: 8080,
-    proxy: {
-      '/api': {
-        target: 'https://platform.acedata.cloud',
-        changeOrigin: true
-      },
-      '/oauth2': {
-        target: 'https://auth.acedata.cloud',
-        changeOrigin: true
+export default defineConfig((config: ConfigEnv) => {
+  process.env = { ...process.env, ...loadEnv(config.mode, process.cwd()) };
+  return {
+    server: {
+      host: 'localhost',
+      port: 8084,
+      proxy: {
+        '/api/v1/auth': {
+          target: process.env.VITE_BASE_URL_AUTH,
+          changeOrigin: true
+        },
+        '/api/v1/users': {
+          target: process.env.VITE_BASE_URL_AUTH,
+          changeOrigin: true
+        },
+        '/oauth2/v1/token': {
+          target: process.env.VITE_BASE_URL_AUTH,
+          changeOrigin: true
+        },
+        '/api': {
+          target: process.env.VITE_BASE_URL_PLATFORM,
+          changeOrigin: true
+        },
+        '/static': {
+          target: process.env.VITE_BASE_URL_PLATFORM,
+          changeOrigin: true
+        }
       }
-    }
-  },
-  plugins: [
-    vue(),
-    string({
-      include: ['**/*.md', '**/*.tpl', '**/*.theme']
-    }),
-    replace({
-      preventAssignment: true
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src')
-    }
-  },
-  build: {
-    sourcemap: false,
-    rollupOptions: {
-      output: {
-        manualChunks(id) {
-          if (id.includes('node_modules')) {
-            const modules = ['@vue', 'highlight.js', 'element-plus', 'axios'];
-            const chunk = modules.find((module) => id.includes(module));
-            return chunk ? `vendor-${chunk}` : 'vendor-others';
+    },
+    plugins: [
+      vue(),
+      string({
+        include: ['**/*.md', '**/*.tpl', '**/*.theme']
+      }),
+      replace({
+        preventAssignment: true
+      })
+    ],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src')
+      }
+    },
+    build: {
+      sourcemap: false,
+      rollupOptions: {
+        output: {
+          manualChunks(id) {
+            if (id.includes('node_modules')) {
+              const modules = ['@vue', 'element-plus', 'axios', 'highlight.js'];
+              const chunk = modules.find((module) => id.includes(module));
+              return chunk ? `vendor-${chunk}` : 'vendor-others';
+            }
           }
         }
       }
     }
-  }
+  };
 });

From 250d04bf2a7a3b02d543f2c6f7c3ec951931ec53 Mon Sep 17 00:00:00 2001
From: Germey <germey@acedata.cloud>
Date: Sun, 17 Mar 2024 21:27:25 +0800
Subject: [PATCH 2/3] update

---
 ...datacloud-hub-5d9432a5-29cd-4a38-8d5e-f28e83e7ca73.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@acedatacloud-hub-5d9432a5-29cd-4a38-8d5e-f28e83e7ca73.json

diff --git a/change/@acedatacloud-hub-5d9432a5-29cd-4a38-8d5e-f28e83e7ca73.json b/change/@acedatacloud-hub-5d9432a5-29cd-4a38-8d5e-f28e83e7ca73.json
new file mode 100644
index 00000000..be4c04ff
--- /dev/null
+++ b/change/@acedatacloud-hub-5d9432a5-29cd-4a38-8d5e-f28e83e7ca73.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix chatdoc issues",
+  "packageName": "@acedatacloud/hub",
+  "email": "germey@acedata.cloud",
+  "dependentChangeType": "patch"
+}

From e586e516bcc78bfa069b3d580929936e6c5886cd Mon Sep 17 00:00:00 2001
From: Germey <germey@acedata.cloud>
Date: Mon, 18 Mar 2024 00:47:35 +0800
Subject: [PATCH 3/3] add service

---
 src/components/common/Price.vue        |   4 +-
 src/constants/action.ts                |   1 -
 src/i18n/zh/index.ts                   |   2 +
 src/i18n/zh/service/button.ts          |   7 ++
 src/i18n/zh/service/field.ts           |   6 ++
 src/i18n/zh/service/index.ts           |  13 +++
 src/i18n/zh/service/message.ts         |  12 +++
 src/i18n/zh/service/title.ts           |   5 +
 src/i18n/zh/service/unit.ts            |  12 +++
 src/operators/chatdoc.ts               |   8 +-
 src/pages/console/application/Buy.vue  | 144 +++++++++++++++++++++++--
 src/pages/console/application/List.vue |  69 +++++-------
 src/router/chatdoc.ts                  |   8 +-
 13 files changed, 225 insertions(+), 66 deletions(-)
 create mode 100644 src/i18n/zh/service/button.ts
 create mode 100644 src/i18n/zh/service/field.ts
 create mode 100644 src/i18n/zh/service/index.ts
 create mode 100644 src/i18n/zh/service/message.ts
 create mode 100644 src/i18n/zh/service/title.ts
 create mode 100644 src/i18n/zh/service/unit.ts

diff --git a/src/components/common/Price.vue b/src/components/common/Price.vue
index 25eee18c..e50d0e32 100644
--- a/src/components/common/Price.vue
+++ b/src/components/common/Price.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="price-text">
     <span v-if="price > 0" class="unfree"
-      >￥{{ price }} {{ unit ? ` / ${unit}` : '' }}{{ start ? $t('common.message.startPrice') : ''
-      }}{{ $t('common.message.startPrice') }}
+      >${{ price }} {{ unit ? ` / ${unit}` : '' }}{{ start ? $t('common.message.startPrice') : '' }}
     </span>
     <span v-else class="free">
       {{ $t('common.message.free') }}
@@ -12,7 +11,6 @@
 
 <script>
 import { defineComponent } from 'vue';
-
 export default defineComponent({
   name: 'ApiPrice',
   props: {
diff --git a/src/constants/action.ts b/src/constants/action.ts
index cc2601fc..317e142c 100644
--- a/src/constants/action.ts
+++ b/src/constants/action.ts
@@ -3,4 +3,3 @@ export const ACTION_UPDATE = 'update';
 export const ACTION_DELETE = 'delete';
 export const ACTION_RETRIEVE = 'retrieve';
 export const ACTION_RETRIEVE_BATCH = 'retrieve_batch';
-export const ACTION_RETRIEVE_ALL = 'retrieve_all';
diff --git a/src/i18n/zh/index.ts b/src/i18n/zh/index.ts
index 5dc52174..beac1ac8 100644
--- a/src/i18n/zh/index.ts
+++ b/src/i18n/zh/index.ts
@@ -9,9 +9,11 @@ import order from './order';
 import distribution from './distribution';
 import user from './user';
 import chatdoc from './chatdoc';
+import service from './service';
 
 export default {
   chat,
+  service,
   chatdoc,
   user,
   order,
diff --git a/src/i18n/zh/service/button.ts b/src/i18n/zh/service/button.ts
new file mode 100644
index 00000000..3f5dcfd7
--- /dev/null
+++ b/src/i18n/zh/service/button.ts
@@ -0,0 +1,7 @@
+export default {
+  learnMore: 'Learn More',
+  apply: 'Apply Now',
+  introduction: 'Service Introduction',
+  apis: 'API Description',
+  pricing: 'Pricing'
+};
diff --git a/src/i18n/zh/service/field.ts b/src/i18n/zh/service/field.ts
new file mode 100644
index 00000000..f20efdb3
--- /dev/null
+++ b/src/i18n/zh/service/field.ts
@@ -0,0 +1,6 @@
+export default {
+  price: 'Price',
+  introduction: 'Introduction',
+  apis: 'API',
+  proxies: 'Proxy'
+};
diff --git a/src/i18n/zh/service/index.ts b/src/i18n/zh/service/index.ts
new file mode 100644
index 00000000..79902d95
--- /dev/null
+++ b/src/i18n/zh/service/index.ts
@@ -0,0 +1,13 @@
+import message from './message';
+import unit from './unit';
+import button from './button';
+import field from './field';
+import title from './title';
+
+export default {
+  message,
+  unit,
+  button,
+  field,
+  title
+};
diff --git a/src/i18n/zh/service/message.ts b/src/i18n/zh/service/message.ts
new file mode 100644
index 00000000..6b261ea2
--- /dev/null
+++ b/src/i18n/zh/service/message.ts
@@ -0,0 +1,12 @@
+export default {
+  free: 'Free',
+  around: 'Around',
+  welcomeCredits: 'Welcome Credits',
+  appliedCount: 'Number of Applications',
+  indexTitle: 'Your smart choice for digital services',
+  indexSubtitle: 'Empower your work and life with standardized excellence in services.',
+  fromPrice: 'From ',
+  packages: 'We offer a variety of packages for credits, the more packages you buy, the more discounts you get.',
+  offer: 'Offer',
+  partnersTitle: 'Trusted by leading partners'
+};
diff --git a/src/i18n/zh/service/title.ts b/src/i18n/zh/service/title.ts
new file mode 100644
index 00000000..af13e69d
--- /dev/null
+++ b/src/i18n/zh/service/title.ts
@@ -0,0 +1,5 @@
+export default {
+  apis: 'API',
+  proxies: 'Proxy',
+  packages: 'Packages'
+};
diff --git a/src/i18n/zh/service/unit.ts b/src/i18n/zh/service/unit.ts
new file mode 100644
index 00000000..23fa5124
--- /dev/null
+++ b/src/i18n/zh/service/unit.ts
@@ -0,0 +1,12 @@
+export default {
+  credit: 'Credit',
+  Credit: 'Credit',
+  credits: 'Credits',
+  Credits: 'Credits',
+  call: 'Call',
+  Call: 'Call',
+  calls: 'Calls',
+  Calls: 'Calls',
+  MB: 'MB',
+  GB: 'GB'
+};
diff --git a/src/operators/chatdoc.ts b/src/operators/chatdoc.ts
index 5c28130f..9847323b 100644
--- a/src/operators/chatdoc.ts
+++ b/src/operators/chatdoc.ts
@@ -8,7 +8,7 @@ import {
   IChatdocRepositoriesResponse,
   IChatdocRepositoryResponse
 } from '@/models';
-import { ACTION_RETRIEVE_ALL, ACTION_UPDATE, BASE_URL_API } from '@/constants';
+import { ACTION_UPDATE, BASE_URL_API } from '@/constants';
 import { ACTION_CREATE, ACTION_DELETE, ACTION_RETRIEVE, ACTION_RETRIEVE_BATCH } from '@/constants';
 
 class ChatdocOperator {
@@ -77,7 +77,7 @@ class ChatdocOperator {
     return await axios.post(
       `/chatdoc/repositories`,
       {
-        action: ACTION_RETRIEVE_ALL
+        action: ACTION_RETRIEVE_BATCH
       },
       {
         headers: {
@@ -97,7 +97,7 @@ class ChatdocOperator {
     return await axios.post(
       `/chatdoc/documents`,
       {
-        action: ACTION_RETRIEVE_ALL,
+        action: ACTION_RETRIEVE_BATCH,
         repository_id: repositoryId
       },
       {
@@ -118,7 +118,7 @@ class ChatdocOperator {
     return await axios.post(
       `/chatdoc/conversations`,
       {
-        action: ACTION_RETRIEVE_ALL,
+        action: ACTION_RETRIEVE_BATCH,
         repository_id: repositoryId
       },
       {
diff --git a/src/pages/console/application/Buy.vue b/src/pages/console/application/Buy.vue
index 9ab1081e..556b9ea8 100644
--- a/src/pages/console/application/Buy.vue
+++ b/src/pages/console/application/Buy.vue
@@ -12,7 +12,46 @@
             <el-row>
               <el-col :span="12" :offset="6">
                 <el-skeleton v-if="loading" />
-                <create-order v-else-if="application" :application="application" />
+                <el-form v-else-if="application" label-width="100px">
+                  <el-form-item :label="$t('application.field.service')">
+                    {{ application?.service?.title }}
+                  </el-form-item>
+                  <el-form-item :label="$t('application.field.package')">
+                    <el-radio-group v-if="application?.service?.packages" v-model="form.packageId">
+                      <el-radio-button
+                        v-for="(pkg, pkgIndex) in application?.service.packages"
+                        :key="pkgIndex"
+                        :label="pkg.id"
+                      >
+                        {{ pkg.amount }} {{ $t(`service.unit.${application?.service?.unit}s`) }}
+                      </el-radio-button>
+                    </el-radio-group>
+                  </el-form-item>
+                  <el-form-item :label="$t('service.field.price')">
+                    <price :price="package?.price" />
+                  </el-form-item>
+                  <el-divider border-style="dashed" />
+                  <el-form-item :label="$t('application.field.shouldPayPrice')">
+                    <span
+                      v-if="package"
+                      :class="{ price: true, unfree: package?.price > 0, free: package?.price === 0 }"
+                    >
+                      ${{ package?.price?.toFixed(2) }}
+                    </span>
+                    <span v-else :class="{ price: true, free: true }"> $ 0 </span>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button
+                      type="primary"
+                      size="large"
+                      class="btn-create"
+                      :loading="creating"
+                      @click="onCreateOrder"
+                    >
+                      {{ $t('application.button.createOrder') }}
+                    </el-button>
+                  </el-form-item>
+                </el-form>
               </el-col>
             </el-row>
           </el-card>
@@ -24,51 +63,136 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { applicationOperator } from '@/operators';
-import CreateOrder from '@/components/order/Create.vue';
-import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus';
-import { IApplication, IApplicationDetailResponse } from '@/models';
+import {
+  applicationOperator,
+  IApplication,
+  IApplicationDetailResponse,
+  IOrderDetailResponse,
+  orderOperator
+} from '@/operators';
+import {
+  ElRow,
+  ElCol,
+  ElCard,
+  ElSkeleton,
+  ElMessage,
+  ElForm,
+  ElFormItem,
+  ElButton,
+  ElInputNumber,
+  ElDivider,
+  ElRadioGroup,
+  ElRadioButton
+} from 'element-plus';
+import { ROUTE_CONSOLE_ORDER_DETAIL } from '@/router';
+import Price from '@/components/common/Price.vue';
 
 interface IData {
   application: IApplication | undefined;
   loading: boolean;
+  form: {
+    amount: number;
+    packageId: string | undefined;
+  };
+  creating: boolean;
 }
 
 export default defineComponent({
   name: 'ConsoleApplicationBuy',
   components: {
-    CreateOrder,
     ElSkeleton,
     ElRow,
     ElCol,
-    ElCard
+    ElCard,
+    ElForm,
+    ElFormItem,
+    ElInputNumber,
+    ElButton,
+    ElDivider,
+    ElRadioGroup,
+    ElRadioButton,
+    Price
   },
   data(): IData {
     return {
       application: undefined,
-      loading: false
+      loading: false,
+      form: {
+        amount: 1000,
+        packageId: undefined
+      },
+      creating: false
     };
   },
   computed: {
     id() {
       return this.$route.params?.id?.toString();
+    },
+    price() {
+      if (this.application?.service?.price && this.form.amount) {
+        return this.form.amount * this.application.service?.price;
+      }
+      return 0;
+    },
+    package() {
+      if (this.application?.service?.packages && this.form.packageId) {
+        const filterPackages = this.application.service?.packages.filter((item) => item.id === this.form.packageId);
+        if (filterPackages.length > 0) {
+          return filterPackages[0];
+        }
+      }
+      return undefined;
     }
   },
   mounted() {
-    this.onFetchData();
+    this.onFetchApplication();
   },
   methods: {
-    onFetchData() {
+    onFetchApplication() {
       this.loading = true;
       applicationOperator
         .get(this.id)
         .then(({ data: data }: { data: IApplicationDetailResponse }) => {
           this.application = data;
           this.loading = false;
+          // by default select first packageId
+          this.form.packageId = this.application?.service?.packages?.[0]?.id;
         })
         .catch(() => {
           this.loading = false;
         });
+    },
+    onCreateOrder() {
+      if (!this.application?.id) {
+        return;
+      }
+      this.creating = true;
+      const unit = this.$t(`service.unit.${this.application?.service?.unit}s`);
+      orderOperator
+        .create({
+          application_id: this.application?.id,
+          amount: this.form.amount,
+          ...(this.form.packageId !== 'custom' && this.package
+            ? {
+                package_id: this.package.id
+              }
+            : {}),
+          description: `${this.application?.service?.title} x ${this.form.amount} ${unit}`
+        })
+        .then(({ data: data }: { data: IOrderDetailResponse }) => {
+          this.creating = false;
+          const order = data;
+          this.$router.push({
+            name: ROUTE_CONSOLE_ORDER_DETAIL,
+            params: {
+              id: order.id
+            }
+          });
+        })
+        .catch(() => {
+          ElMessage.error(this.$t('order.message.createFailed'));
+          this.creating = false;
+        });
     }
   }
 });
diff --git a/src/pages/console/application/List.vue b/src/pages/console/application/List.vue
index efb68f26..3336f6f5 100644
--- a/src/pages/console/application/List.vue
+++ b/src/pages/console/application/List.vue
@@ -9,24 +9,30 @@
       <el-row>
         <el-col :span="24">
           <el-card shadow="hover">
-            <el-table v-loading="loading" :data="applications" stripe table-layout="fixed">
-              <el-table-column prop="id" :label="$t('application.field.id')" width="300px" class-name="text-center">
+            <el-table
+              v-loading="loading"
+              :data="applications"
+              stripe
+              table-layout="fixed"
+              :empty-text="$t('common.message.noData')"
+            >
+              <el-table-column prop="id" :label="$t('application.field.id')" width="220px" class-name="text-center">
                 <template #default="scope">
                   <span>{{ scope.row.id }}</span>
                   <span class="copy">
-                    <copy-to-clipboard :content="scope?.row?.id" />
+                    <copy-to-clipboard :content="scope?.row?.id" class="inline-block" />
                   </span>
                 </template>
               </el-table-column>
-              <el-table-column :label="$t('application.field.name')" width="220px">
+              <el-table-column :label="$t('application.field.name')" width="180px">
                 <template #default="scope">
-                  <span v-if="scope.row.type === applicationType.API">{{ scope.row?.api?.title }}</span>
+                  <span>{{ scope.row?.service?.title }}</span>
                 </template>
               </el-table-column>
               <el-table-column
                 prop="remaining_amount"
                 :label="$t('application.field.remainingAmount')"
-                width="120px"
+                width="160px"
                 class-name="text-center"
               >
                 <template #default="scope">
@@ -36,22 +42,13 @@
               <el-table-column
                 prop="used_amount"
                 :label="$t('application.field.usedAmount')"
-                width="120px"
+                width="160px"
                 class-name="text-center"
               >
                 <template #default="scope">
                   <span>{{ getUsedAmount(scope.row) }}</span>
                 </template>
               </el-table-column>
-              <el-table-column fixed="right" width="100px">
-                <template #default="scope">
-                  <div class="float-right">
-                    <el-button type="primary" @click="onBuyMore(scope?.row)">
-                      {{ $t('application.button.buyMore') }}
-                    </el-button>
-                  </div>
-                </template>
-              </el-table-column>
             </el-table>
           </el-card>
         </el-col>
@@ -74,7 +71,7 @@ import Pagination from '@/components/common/Pagination.vue';
 import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
 import { ElTable, ElRow, ElCol, ElTableColumn, ElButton, ElCard } from 'element-plus';
 import { ROUTE_CONSOLE_APPLICATION_BUY } from '@/router/constants';
-import { IApplication, IApplicationListResponse, IApplicationType, ICredentialType } from '@/models';
+import { IApplication, IApplicationListResponse, IApplicationType, ICredentialType, IService } from '@/models';
 
 interface IData {
   applications: IApplication[];
@@ -86,9 +83,9 @@ interface IData {
     amount: number | undefined;
   };
   active: {
+    service: IService | undefined;
     application: IApplication | undefined;
   };
-  applicationType: typeof IApplicationType;
   credentialType: typeof ICredentialType;
 }
 
@@ -107,17 +104,16 @@ export default defineComponent({
   data(): IData {
     return {
       credentialType: ICredentialType,
-      applicationType: IApplicationType,
       applications: [],
       loading: false,
       total: undefined,
       buying: false,
-      // dynamic calculate the limit according to window height
-      limit: Math.floor((window.innerHeight - 300) / 50),
+      limit: 10,
       form: {
         amount: 1
       },
       active: {
+        service: undefined,
         application: undefined
       }
     };
@@ -128,9 +124,6 @@ export default defineComponent({
     },
     page() {
       return parseInt(this.$route.query.page?.toString() || '1');
-    },
-    type() {
-      return (this.$route.query.type?.toString() || IApplicationType.API) as IApplicationType;
     }
   },
   watch: {
@@ -149,19 +142,6 @@ export default defineComponent({
     this.onFetchData();
   },
   methods: {
-    onFilterType(type: string) {
-      if (type === this.type) {
-        return;
-      }
-      this.$router.push({
-        ...this.$route,
-        query: {
-          ...this.$route.query,
-          page: 1,
-          type
-        }
-      });
-    },
     onBuyMore(application: IApplication) {
       this.$router.push({
         name: ROUTE_CONSOLE_APPLICATION_BUY,
@@ -186,7 +166,6 @@ export default defineComponent({
           limit: this.limit,
           offset: (this.page - 1) * this.limit,
           user_id: this.$store.getters.user.id,
-          type: this.type,
           ordering: '-created_at'
         })
         .then(({ data: data }: { data: IApplicationListResponse }) => {
@@ -199,16 +178,18 @@ export default defineComponent({
         });
     },
     getRemainingAmount(application: IApplication) {
-      if (application.type === IApplicationType.API) {
-        const unit = this.$t(`api.unit.${application?.api?.unit}`);
-        return `${application.remaining_amount}${unit}`;
+      if (application.remaining_amount === undefined || application.remaining_amount === null) {
+        return '';
       }
+      const unit = this.$t(`service.unit.${application?.service?.unit}s`);
+      return `${application.remaining_amount?.toFixed(6)} ${unit}`;
     },
     getUsedAmount(application: IApplication) {
-      if (application.type === IApplicationType.API) {
-        const unit = this.$t(`api.unit.${application?.api?.unit}`);
-        return `${application.used_amount}${unit}`;
+      if (application.used_amount === undefined || application.used_amount === null) {
+        return '';
       }
+      const unit = this.$t(`service.unit.${application?.service?.unit}s`);
+      return `${application.used_amount?.toFixed(6)} ${unit}`;
     }
   }
 });
diff --git a/src/router/chatdoc.ts b/src/router/chatdoc.ts
index a9f858a7..f3629fe2 100644
--- a/src/router/chatdoc.ts
+++ b/src/router/chatdoc.ts
@@ -19,22 +19,22 @@ export default {
       component: () => import('@/pages/chatdoc/Index.vue')
     },
     {
-      path: 'repository/:repositoryId/conversation',
+      path: 'repositories/:repositoryId/conversations',
       name: ROUTE_CHATDOC_CONVERSATION_NEW,
       component: () => import('@/pages/chatdoc/Conversation.vue')
     },
     {
-      path: 'repository/:repositoryId/conversation/:conversationId',
+      path: 'repositories/:repositoryId/conversations/:conversationId',
       name: ROUTE_CHATDOC_CONVERSATION,
       component: () => import('@/pages/chatdoc/Conversation.vue')
     },
     {
-      path: 'repository/:repositoryId/manage',
+      path: 'repositories/:repositoryId/manage',
       name: ROUTE_CHATDOC_MANAGE,
       component: () => import('@/pages/chatdoc/Manage.vue')
     },
     {
-      path: 'repository/:repositoryId',
+      path: 'repositories/:repositoryId',
       name: ROUTE_CHATDOC_SETTING,
       component: () => import('@/pages/chatdoc/Setting.vue')
     }