refactor chat

src/components/chat/Sidebar.vue → src/components/chat/SidePanel.vue

@@ -71,104 +71,57 @@ 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 { apiUsageOperator, IApplication, chatOperator, applicationOperator } from '@/operators';
+import { IApplication, chatOperator } from '@/operators';
 import { IChatConversation } from '@/operators/chat/models';
-import {
-  CHAT_MODEL_CHATGPT,
-  CHAT_MODEL_CHATGPT4,
-  CHAT_MODEL_CHATGPT4_BROWSING,
-  CHAT_MODEL_CHATGPT_16K,
-  CHAT_MODEL_CHATGPT_BROWSING
-} from '@/operators';
-
-interface IData {
-  initializing: boolean;
-  loading: boolean;
-  conversations: IChatConversation[] | undefined;
-  applications: IApplication[] | undefined;
-}
+import { Status } from '@/store/common/models';
 
 export default defineComponent({
-  name: 'Sidebar',
+  name: 'SidePanel',
   components: {
     ElInput,
     FontAwesomeIcon,
     ElSkeleton
   },
   props: {},
   emits: ['click'],
-  data(): IData {
-    return {
-      initializing: false,
-      loading: false,
-      conversations: undefined,
-      applications: undefined
-    };
+  computed: {
+    conversations() {
+      return this.$store.state.chat.conversations;
+    },
+    applications() {
+      return this.$store.state.chat.applications;
+    },
+    loading() {
+      return this.$store.state.chat.getConversationsStatus === Status.Request;
+    }
   },
   watch: {
-    applications(val) {
-      if (val) {
-        this.onFetchConversations();
+    applications: {
+      async handler(val: IApplication[]) {
+        if (!val) {
+          return;
+        }
+        await this.$store.dispatch('chat/getConversations');
       }
     }
   },
-  async mounted() {
-    await this.onFetchApplications();
-    await this.onFetchConversations();
-  },
   methods: {
     async onNewConversation() {
       this.$router.push({
         name: ROUTE_CHAT_CONVERSATION_NEW
       });
     },
-    async onFetchApplications() {
-      this.initializing = true;
-      const { data: applications } = await applicationOperator.getAll({
-        user_id: this.$store.state.common.user.id,
-        api_id: [
-          CHAT_MODEL_CHATGPT.apiId,
-          CHAT_MODEL_CHATGPT_16K.apiId,
-          CHAT_MODEL_CHATGPT_BROWSING.apiId,
-          CHAT_MODEL_CHATGPT4.apiId,
-          CHAT_MODEL_CHATGPT4_BROWSING.apiId
-        ]
-      });
-      this.initializing = false;
-      this.applications = applications?.items;
-    },
     async onConfirm(conversation: IChatConversation) {
       if (conversation?.deleting) {
         await chatOperator.deleteConversation(conversation.id);
-        await this.onFetchConversations();
+        await this.$store.dispatch('chat/getConversations');
       } else if (conversation?.editing) {
         await chatOperator.updateConversation(conversation);
-        this.onFetchConversations();
+        await this.$store.dispatch('chat/getConversations');
       } else {
         conversation.editing = true;
       }
     },
-    async onFetchConversations() {
-      this.loading = true;
-      const {
-        data: { items: apiUsages }
-      } = await apiUsageOperator.getAll({
-        user_id: this.$store.state.common.user.id,
-        // @ts-ignore
-        application_id: this.applications?.map((application) => application.id),
-        offset: 0,
-        limit: 30,
-        ordering: '-created_at'
-      });
-      this.loading = false;
-      // de duplicate conversations using id
-      const conversationIds: string[] = apiUsages
-        .map((apiUsage) => apiUsage.metadata?.conversation_id)
-        .filter((id) => id);
-      const uniqueConversationIds = [...new Set(conversationIds)];
-      const conversations = (await chatOperator.getConversations(uniqueConversationIds)).data;
-      this.conversations = conversations;
-    },
     onClick(id: string) {
       if (!id) {
         return;
@@ -191,8 +144,13 @@ export default defineComponent({
   flex-direction: column;
   align-items: flex-end;
   padding: 15px;
+  width: 300px;
+  height: 100%;
+  border-right: 1px solid #eee;
+  overflow-y: scroll;
+
   .conversations {
-    flex: 1;
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;

src/components/midjourney/ReferenceImage.vue

@@ -50,7 +50,7 @@ export default defineComponent({
   computed: {
     headers() {
       return {
-        Authorization: `Bearer ${this.$store.state.common.token.access}`
+        Authorization: `Bearer ${this.$store.state.token.access}`
       };
     },
     urls() {

src/components/midjourney/tasks/TaskBriefList.vue

@@ -79,7 +79,7 @@ export default defineComponent({
       const {
         data: { items: apiUsages }
       } = await apiUsageOperator.getAll({
-        user_id: this.$store.state.common.user.id,
+        user_id: this.$store.state.user.id,
         application_id: this.applications?.map((application) => application.id),
         offset: 0,
         limit: 5,

src/components/midjourney/tasks/TaskFullList.vue

@@ -116,7 +116,7 @@ export default defineComponent({
       const {
         data: { items: apiUsages, count }
       } = await apiUsageOperator.getAll({
-        user_id: this.$store.state.common.user.id,
+        user_id: this.$store.state.user.id,
         application_id: this.applications?.map((application) => application.id),
         offset: (this.page - 1) * this.limit,
         limit: this.limit,

src/layouts/Chat.vue

@@ -4,7 +4,7 @@
       <navigator />
     </div>
     <div class="main">
-      <sidebar class="sidebar" />
+      <side-panel />
       <router-view />
     </div>
   </div>
@@ -13,68 +13,17 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Navigator from '@/components/common/Navigator.vue';
-import Sidebar from '@/components/chat/Sidebar.vue';
-import {
-  CHAT_MODEL_CHATGPT,
-  CHAT_MODEL_CHATGPT4,
-  CHAT_MODEL_CHATGPT4_BROWSING,
-  CHAT_MODEL_CHATGPT_16K,
-  CHAT_MODEL_CHATGPT_BROWSING,
-  applicationOperator
-} from '@/operators';
+import SidePanel from '@/components/chat/SidePanel.vue';
 
 export default defineComponent({
   name: 'LayoutChat',
   components: {
-    Sidebar,
+    SidePanel,
     Navigator
   },
-  data() {
-    return {
-      initializing: false,
-      applications: this.$store.state.chat.applications || undefined
-    };
-  },
-  mounted() {
-    this.onFetchApplications();
-  },
-  methods: {
-    async onFetchConversations() {
-      this.loading = true;
-      const {
-        data: { items: apiUsages }
-      } = await apiUsageOperator.getAll({
-        user_id: this.$store.state.common.user.id,
-        // @ts-ignore
-        application_id: this.applications?.map((application) => application.id),
-        offset: 0,
-        limit: 30,
-        ordering: '-created_at'
-      });
-      this.loading = false;
-      // de duplicate conversations using id
-      const conversationIds: string[] = apiUsages
-        .map((apiUsage) => apiUsage.metadata?.conversation_id)
-        .filter((id) => id);
-      const uniqueConversationIds = [...new Set(conversationIds)];
-      const conversations = (await chatOperator.getConversations(uniqueConversationIds)).data;
-      this.conversations = conversations;
-    },
-    async onFetchApplications() {
-      this.initializing = true;
-      const { data: applications } = await applicationOperator.getAll({
-        user_id: this.$store.state.common.user.id,
-        api_id: [
-          CHAT_MODEL_CHATGPT.apiId,
-          CHAT_MODEL_CHATGPT_16K.apiId,
-          CHAT_MODEL_CHATGPT_BROWSING.apiId,
-          CHAT_MODEL_CHATGPT4.apiId,
-          CHAT_MODEL_CHATGPT4_BROWSING.apiId
-        ]
-      });
-      this.initializing = false;
-      this.$store.dispatch('chat/setApplications', applications?.items);
-    }
+  async mounted() {
+    await this.$store.dispatch('chat/getApplications');
+    await this.$store.dispatch('chat/getConversations');
   }
 });
 </script>
@@ -97,14 +46,6 @@ export default defineComponent({
     height: 100%;
     display: flex;
     flex-direction: row;
-
-    .sidebar {
-      display: block;
-      width: 300px;
-      height: 100%;
-      border-right: 1px solid #eee;
-      overflow-y: scroll;
-    }
   }
 }
 </style>

src/operators/instance.ts

@@ -15,7 +15,8 @@ const httpClient: AxiosInstance = axios.create({
 });
 
 httpClient.interceptors.request.use((config) => {
-  const accessToken = store.state.common.token?.access;
+  console.log('store', store.state);
+  const accessToken = store.state.token?.access;
   if (!config.headers) {
     config.headers = {};
   }

src/pages/auth/Callback.vue

@@ -1,14 +1,15 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { getAuthBaseUrl, getHubBaseUrl } from '@/utils';
-import { oauthOperator } from '@/operators/auth/operator';
-import { applicationOperator, userOperator } from '@/operators';
+import { IUser } from '@/operators';
+import { IToken } from '@/operators/auth/models';
+import { ROUTE_AUTH_LOGIN } from '@/router';
 
 interface IData {
   accessToken: string | undefined;
   refreshToken: string | undefined;
   redirect: string | undefined;
   code: string | undefined;
+  user: IUser | undefined;
 }
 
 export default defineComponent({
@@ -18,46 +19,29 @@ export default defineComponent({
       accessToken: undefined,
       refreshToken: undefined,
       redirect: this.$route.query.redirect?.toString(),
-      code: this.$route.query.code?.toString()
+      code: this.$route.query.code?.toString(),
+      user: undefined
     };
   },
   async mounted() {
+    // if auth code is provided, get token via oauth
     if (this.code) {
-      console.debug('code found, try to get tokens');
-      const { data } = await oauthOperator.token({
-        code: this.code
-      });
-      this.accessToken = data.access_token;
-      this.refreshToken = data.refresh_token;
-      console.debug('get tokens successfully');
+      const data: IToken = await this.$store.dispatch('getToken', this.code);
+      this.accessToken = data.access;
+      this.refreshToken = data.refresh;
+    } else {
+      this.$router.push({ name: ROUTE_AUTH_LOGIN });
+      return;
     }
+    // if token acquired, get user info
     if (this.accessToken && this.refreshToken) {
-      // store token to global store
-      await this.$store.dispatch('common/setToken', {
-        refresh: this.refreshToken,
-        access: this.accessToken
-      });
-      console.debug('set token successfully');
-      const { data: user } = await userOperator.getMe();
-      await this.$store.dispatch('common/setUser', user);
-      console.debug('set user successfully');
-      const { data: applications } = await applicationOperator.getAll({
-        user_id: user.id
-      });
-      await this.$store.dispatch('common/setApplications', applications);
-      console.debug('set applications successfully');
+      const user = await this.$store.dispatch('getUser');
+      this.user = user;
       if (this.redirect) {
         this.$router.push(this.redirect);
       }
     } else {
-      console.debug('access token and refresh token not found, try to re-auth again');
-      const hubBaseUrl = getHubBaseUrl();
-      const authBaseUrl = getAuthBaseUrl();
-      // callback url used to init access token and then redirect back of `redirect`
-      const callbackUrl = `${hubBaseUrl}/auth/callback?redirect=${this.redirect}`;
-      // redirect to auth service to get access token then redirect back
-      const targetUrl = `${authBaseUrl}/auth/login?redirect=${callbackUrl}`;
-      window.location.href = targetUrl;
+      this.$router.push({ name: ROUTE_AUTH_LOGIN });
     }
   }
 });