update api integration

ZhiShuYun · Sep 30, 2023 · f9c6fef · f9c6fef
1 parent 1d6b00c
commit f9c6fef
Show file tree

Hide file tree

Showing 15 changed files with 155 additions and 127 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,6 +8,7 @@
 import { defineComponent } from 'vue';
 import { ElConfigProvider } from 'element-plus';
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
+import { applicationOperator, userOperator } from './operators';
 
 export default defineComponent({
   components: {
@@ -18,6 +19,15 @@ export default defineComponent({
       locale: zhCn
     };
   },
-  async mounted() {}
+  async mounted() {
+    const { data: user } = await userOperator.getMe();
+    console.log('suer', user);
+    this.$store.dispatch('setUser', user);
+    const { data: applications } = await applicationOperator.getAll({
+      user_id: user.id
+    });
+    console.log('applicatioins', applications);
+    this.$store.dispatch('setApplications', applications);
+  }
 });
 </script>
diff --git a/src/components/chat/ModelSelector.vue b/src/components/chat/ModelSelector.vue
@@ -21,12 +21,17 @@ import { defineComponent } from 'vue';
 import { ElSelect, ElOption, ElDropdown, ElButton, ElDropdownItem } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { ROUTE_CHAT_INDEX } from '@/router/constants';
+import {
+  API_ID_CHATGPT,
+  API_ID_CHATGPT4,
+  API_ID_CHATGPT4_BROWSING,
+  API_ID_CHATGPT_16K,
+  API_ID_CHATGPT_BROWSING
+} from '@/operators/chat/constants';
 
 export default defineComponent({
   name: 'ModelSelector',
   components: {
-    ElSelect,
-    ElOption,
     ElDropdown,
     ElButton,
     ElDropdownItem,
@@ -38,7 +43,7 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'select'],
   data() {
     return {
       value: this.modelValue,
@@ -49,15 +54,15 @@ export default defineComponent({
           options: [
             {
               label: 'AI 问答',
-              value: 'chatgpt'
+              value: API_ID_CHATGPT
             },
             {
               label: 'AI 问答 3.5 - 16K',
-              value: 'chatgpt-16k'
+              value: API_ID_CHATGPT_16K
             },
             {
               label: 'AI 问答 3.5 - 联网版',
-              value: 'chatgpt-browsing'
+              value: API_ID_CHATGPT_BROWSING
             }
           ]
         },
@@ -67,21 +72,18 @@ export default defineComponent({
           options: [
             {
               label: 'AI 问答 4.0',
-              value: 'chatgpt4'
+              value: API_ID_CHATGPT4
             },
             {
               label: 'AI 问答 4.0 - 联网版',
-              value: 'chatgpt4-browsing'
+              value: API_ID_CHATGPT4_BROWSING
             }
           ]
         }
       ]
     };
   },
   watch: {
-    value(val) {
-      this.$emit('update:modelValue', val);
-    },
     modelValue(val) {
       if (val !== this.value) {
         this.value = val;
@@ -92,6 +94,9 @@ export default defineComponent({
     onCommandChange(command: string) {
       console.log('val', command);
       this.value = command;
+      // this.$emit('update:modelValue', command);
+      this.$emit('select', command);
+      console.log('ss', command);
     }
   }
 });

diff --git a/src/constants/api.ts b/src/constants/api.ts
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -2,4 +2,4 @@ export * from './errorCode';
 export * from './env';
 export * from './endpoint';
 export * from './image';
-export * from './api';
+// export * from './api';
diff --git a/src/operators/application/operator.ts b/src/operators/application/operator.ts
@@ -35,14 +35,6 @@ class ApplicationOperator {
   async delete(id: string): Promise<AxiosResponse<null>> {
     return await httpClient.delete(`/${this.key}/${id}`);
   }
-
-  async rotateCredential(id: string): Promise<AxiosResponse<IApplicationDetailResponse>> {
-    return await httpClient.post(`/${this.key}/${id}/rotate-credential/`);
-  }
-
-  async updateRemainingAmount(id: string, data: IApplication): Promise<AxiosResponse<IApplicationDetailResponse>> {
-    return await httpClient.post(`/${this.key}/${id}/update-remaining-amount/`, data);
-  }
 }
 
 export const applicationOperator = new ApplicationOperator();
diff --git a/src/operators/chat/constants.ts b/src/operators/chat/constants.ts
@@ -1,5 +1,6 @@
-export const API_ID_CHATGPT = '3333';
-export const API_ID_CHATGPT4 = '3333';
-export const API_ID_CHATGPT_BROWSING = '3333';
-export const API_ID_CHATGPT4_BROWSING = '3333';
-export const API_ID_CHATGPT_16k = '3333';
+export const API_ID_CHATGPT = '1d58971c-e3cd-4713-a3ce-854a731adb14';
+export const API_ID_CHATGPT_16K = 'bf93bb28-55a7-4428-ad82-156bf410f4e2';
+export const API_ID_CHATGPT_BROWSING = '12271e2e-794f-4079-a714-f68dd0df7808';
+
+export const API_ID_CHATGPT4 = '1c4e8fa3-362b-4e0a-b0fd-9ff9fc173b77';
+export const API_ID_CHATGPT4_BROWSING = 'a61de51b-d0d0-48a2-9a17-1d4986d5d497';
diff --git a/src/operators/chat/index.ts b/src/operators/chat/index.ts
@@ -1,2 +1,3 @@
 export * from './models';
 export * from './operator';
+export * from './constants';
diff --git a/src/operators/chat/models.ts b/src/operators/chat/models.ts
@@ -48,5 +48,6 @@ export interface IChatResponse {
 
 export interface IChatOptions {
   stream?: (response: IChatResponse) => void;
-  api_id: string;
+  token: string;
+  endpoint?: string;
 }
diff --git a/src/operators/chat/operator.ts b/src/operators/chat/operator.ts
@@ -1,35 +1,25 @@
 import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
 import { IChatOptions, IChatRequest, IChatResponse } from './models';
 import store from '@/store';
-import { IApplication } from '@/store/models';
+
 class ChatOperator {
-  async request(data: IChatRequest, config?: IChatOptions): Promise<AxiosResponse<IChatResponse>> {
-    const applications: IApplication[] = store.getters.applications;
-    // find related application
-    const application = applications?.filter((application: IApplication) => {
-      return (application.api_id = config?.api_id);
-    })?.[0];
-    if (!application) {
-      return Promise.reject('no application');
-    }
-    const token = application?.credential?.token;
-    if (!token) {
-      return Promise.reject('no token');
-    }
+  async request(data: IChatRequest, options: IChatOptions): Promise<AxiosResponse<IChatResponse>> {
     return await axios.post(`/chatgpt`, data, {
       headers: {
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${options.token}`,
         accept: 'application/x-ndjson',
         'content-type': 'application/json'
       },
+      baseURL: options.endpoint,
+      responseType: 'stream',
       onDownloadProgress: (event) => {
         const response = event.target.response;
         const lines = response.split('\r\n').filter((line: string) => !!line);
         const lastLine = lines[lines.length - 1];
         if (lastLine) {
           const jsonData = JSON.parse(lastLine);
-          if (config?.stream) {
-            config?.stream(jsonData as IChatResponse);
+          if (options?.stream) {
+            options?.stream(jsonData as IChatResponse);
           }
         }
       }

diff --git a/src/operators/instance.ts b/src/operators/instance.ts
@@ -11,7 +11,7 @@ const httpClient: AxiosInstance = axios.create({
 });
 
 httpClient.interceptors.request.use((config) => {
-  const accessToken = store.getters.accessToken;
+  const accessToken = store.getters.token.access;
   if (!config.headers) {
     config.headers = {};
   }

diff --git a/src/operators/user/models.ts b/src/operators/user/models.ts
@@ -1,5 +1,5 @@
 export interface IUser {
-  id: string;
+  id?: string;
   username?: string;
   first_name?: string;
   last_name?: string;
@@ -10,15 +10,6 @@ export interface IUser {
   province?: string;
   country?: string;
   avatar?: string;
-  type: 'user';
-}
-
-export interface IBot {
-  id?: string;
-  username?: string;
-  nickname?: string;
-  avatar?: string;
-  type: 'bot';
 }
 
 export interface IUserDetailResponse extends IUser {}
diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="page">
-    <model-selector v-model="model" class="model-selector" />
+    <model-selector v-model="apiId" class="model-selector" @select="onSelectModel" />
+    <div>
+      {{ application?.remaining_amount }}
+    </div>
     <div class="main">
       <introduction v-if="messages && messages.length === 0" />
       <div v-else class="messages">
@@ -16,18 +19,30 @@
 </template>
 
 <script lang="ts">
-import { IMessage, ROLE_ASSISTANT, ROLE_USER } from '@/operators/message/models';
+import { IMessage, IMessageState, ROLE_ASSISTANT, ROLE_USER } from '@/operators/message/models';
 import { defineComponent } from 'vue';
 import Message from '@/components/chat/Message.vue';
-import { IChatModel, IChatMessage, CHAT_MODEL_CHATGPT, IChatResponse } from '@/operators';
+import {
+  IChatModel,
+  IChatMessage,
+  CHAT_MODEL_CHATGPT,
+  IChatResponse,
+  API_ID_CHATGPT,
+  applicationOperator,
+  IApplication,
+  ChatMessageState
+} from '@/operators';
 import InputBox from '@/components/chat/InputBox.vue';
 import ModelSelector from '@/components/chat/ModelSelector.vue';
 import { chatOperator } from '@/operators';
-
+import { ERROR_CODE_CANCELED, ERROR_CODE_UNKNOWN } from '@/constants/errorCode';
+import axios from 'axios';
 export interface IData {
   messages: IChatMessage[];
-  model: IChatModel;
+  application: IApplication | undefined;
+  apiId: string;
   question: '';
+  needApply: boolean;
 }
 
 export default defineComponent({
@@ -41,7 +56,9 @@ export default defineComponent({
   data(): IData {
     return {
       question: '',
-      model: CHAT_MODEL_CHATGPT,
+      needApply: false,
+      apiId: API_ID_CHATGPT,
+      application: undefined,
       messages: [
         {
           role: ROLE_USER,
@@ -92,29 +109,74 @@ export default defineComponent({
     }
   },
   methods: {
-    onSubmitQuestion() {
+    async onSelectModel() {
+      console.log('this.apiId', this.apiId);
+      const { data: applications } = await applicationOperator.getAll({
+        user_id: this.$store.state.user.id,
+        api_id: this.apiId
+      });
+      if (!applications || applications?.items?.length === 0) {
+        this.needApply = true;
+        return;
+      }
+      this.application = applications.items[0];
+      console.log('applications', applications);
+    },
+    async onSubmitQuestion() {
       this.messages.push({
         content: this.question,
         role: ROLE_USER
       });
       this.question = '';
+      await this.onFetchAnswer();
     },
     async onFetchAnswer() {
-      const apiId = this.model;
-      const { data: response }: IChatResponse = await chatOperator.request(
-        {
-          question: this.question,
-          conversation_id: this.conversationId,
-          stateful: true
-        },
-        {
-          api_id: apiId,
-          stream: (response: IChatResponse) => {
-            console.log('response', response);
+      const token = this.application?.credential?.token;
+      const endpoint = this.application?.api?.endpoint;
+      const question = this.messages[this.messages.length - 1].content;
+      console.log('q', question);
+      if (!token || !endpoint || !question) {
+        console.error('no token or endpoint or question');
+        return;
+      }
+      console.log('token', token);
+      chatOperator
+        .request(
+          {
+            question,
+            conversation_id: this.conversationId,
+            stateful: true
+          },
+          {
+            token,
+            endpoint,
+            stream: (response: IChatResponse) => {
+              console.log('response', response);
+            }
           }
-        }
-      );
-      console.log('this.response', response);
+        )
+        .catch((error) => {
+          if (this.messages && this.messages.length > 0) {
+            this.messages[this.messages.length - 1].state = ChatMessageState.FAILED;
+          }
+          if (axios.isCancel(error)) {
+            this.messages[this.messages.length - 1].error = {
+              code: ERROR_CODE_CANCELED
+            };
+          } else if (error?.response?.data && error?.response?.data.code) {
+            const data = error?.response?.data;
+            if (this.messages && this.messages.length > 0) {
+              this.messages[this.messages.length - 1].error = data;
+            }
+          } else {
+            if (this.messages && this.messages.length > 0) {
+              this.messages[this.messages.length - 1].error = {
+                code: ERROR_CODE_UNKNOWN
+              };
+            }
+          }
+        });
+      // console.log('this.response', response);
     }
   }
 });