From b1cc9737d189d6d7de3eca545d8e8ed41e69531d Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Sat, 30 Dec 2023 15:23:03 +0800
Subject: [PATCH] refactor chat

---
 .../chat/{Sidebar.vue => SidePanel.vue}       | 96 ++++++-------------
 src/components/midjourney/ReferenceImage.vue  |  2 +-
 .../midjourney/tasks/TaskBriefList.vue        |  2 +-
 .../midjourney/tasks/TaskFullList.vue         |  2 +-
 src/layouts/Chat.vue                          | 71 ++------------
 src/operators/instance.ts                     |  3 +-
 src/pages/auth/Callback.vue                   | 50 ++++------
 src/pages/chat/Conversation.vue               | 33 ++-----
 src/pages/midjourney/History.vue              |  2 +-
 src/pages/midjourney/Index.vue                |  2 +-
 src/store/chat/actions.ts                     | 74 +++++++++++++-
 src/store/chat/models.ts                      |  6 +-
 src/store/chat/mutations.ts                   | 16 +++-
 src/store/chat/state.ts                       |  4 +-
 src/store/common/actions.ts                   | 30 +++++-
 src/store/common/getters.ts                   |  7 +-
 src/store/common/models.ts                    |  2 +-
 src/store/common/mutations.ts                 |  7 +-
 src/store/common/state.ts                     |  6 +-
 src/utils/log.ts                              |  3 +
 20 files changed, 190 insertions(+), 228 deletions(-)
 rename src/components/chat/{Sidebar.vue => SidePanel.vue} (68%)
 create mode 100644 src/utils/log.ts

diff --git a/src/components/chat/Sidebar.vue b/src/components/chat/SidePanel.vue
similarity index 68%
rename from src/components/chat/Sidebar.vue
rename to src/components/chat/SidePanel.vue
index 2060b08..ceb7540 100644
--- a/src/components/chat/Sidebar.vue
+++ b/src/components/chat/SidePanel.vue
@@ -71,25 +71,12 @@ 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,
@@ -97,78 +84,44 @@ export default defineComponent({
   },
   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;
diff --git a/src/components/midjourney/ReferenceImage.vue b/src/components/midjourney/ReferenceImage.vue
index 0df469f..777715d 100644
--- a/src/components/midjourney/ReferenceImage.vue
+++ b/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() {
diff --git a/src/components/midjourney/tasks/TaskBriefList.vue b/src/components/midjourney/tasks/TaskBriefList.vue
index 97849a0..22c8a46 100644
--- a/src/components/midjourney/tasks/TaskBriefList.vue
+++ b/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,
diff --git a/src/components/midjourney/tasks/TaskFullList.vue b/src/components/midjourney/tasks/TaskFullList.vue
index e69a493..2a26f99 100644
--- a/src/components/midjourney/tasks/TaskFullList.vue
+++ b/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,
diff --git a/src/layouts/Chat.vue b/src/layouts/Chat.vue
index 73d1e35..be0e9b9 100644
--- a/src/layouts/Chat.vue
+++ b/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>
diff --git a/src/operators/instance.ts b/src/operators/instance.ts
index 2a85a70..1d23a5c 100644
--- a/src/operators/instance.ts
+++ b/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 = {};
   }
diff --git a/src/pages/auth/Callback.vue b/src/pages/auth/Callback.vue
index 5ce93b2..1e0efa6 100644
--- a/src/pages/auth/Callback.vue
+++ b/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 });
     }
   }
 });
diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
index a067bf6..38377da 100644
--- a/src/pages/chat/Conversation.vue
+++ b/src/pages/chat/Conversation.vue
@@ -5,7 +5,7 @@
       :initializing="initializing"
       :application="application"
       :api-id="model.apiId"
-      @refresh="onFetchApplications"
+      @refresh="$store.dispatch('chat/getApplications')"
     />
     <div class="dialogue">
       <introduction v-if="messages && messages.length === 0" />
@@ -33,10 +33,6 @@ import {
   IApplication,
   IChatMessageState,
   IChatAskResponse,
-  CHAT_MODEL_CHATGPT_16K,
-  CHAT_MODEL_CHATGPT_BROWSING,
-  CHAT_MODEL_CHATGPT4,
-  CHAT_MODEL_CHATGPT4_BROWSING,
   chatOperator
 } from '@/operators';
 import InputBox from '@/components/chat/InputBox.vue';
@@ -48,7 +44,6 @@ import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW } from '@/router';
 export interface IData {
   messages: IChatMessage[];
   model: IChatModel;
-  applications: IApplication[] | undefined;
   question: '';
   initializing: boolean;
   applied: boolean | undefined;
@@ -68,7 +63,6 @@ export default defineComponent({
       question: '',
       initializing: false,
       applied: undefined,
-      applications: undefined,
       messages: []
     };
   },
@@ -77,7 +71,10 @@ export default defineComponent({
       return this.$route.params.id?.toString();
     },
     application() {
-      return this.applications?.find((application) => application.api?.id === this.model.apiId);
+      return this.applications?.find((application: IApplication) => application.api?.id === this.model.apiId);
+    },
+    applications() {
+      return this.$store.state.chat.applications;
     }
   },
   watch: {
@@ -88,7 +85,6 @@ export default defineComponent({
     }
   },
   async mounted() {
-    await this.onFetchApplications();
     await this.onFetchHistory();
   },
   methods: {
@@ -100,22 +96,7 @@ export default defineComponent({
     },
     async onSelectModel() {
       await this.onCreateNewConversation();
-      await this.onFetchApplications();
-    },
-    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;
+      await this.$store.dispatch('chat/getApplications');
     },
     async onSubmitQuestion() {
       this.messages.push({
@@ -174,7 +155,7 @@ export default defineComponent({
         )
         .then(() => {
           this.messages[this.messages.length - 1].state = IChatMessageState.FINISHED;
-          this.onFetchApplications();
+          this.$store.dispatch('chat/getConversations');
         })
         .catch((error) => {
           if (this.messages && this.messages.length > 0) {
diff --git a/src/pages/midjourney/History.vue b/src/pages/midjourney/History.vue
index 77dd6e7..54a245b 100644
--- a/src/pages/midjourney/History.vue
+++ b/src/pages/midjourney/History.vue
@@ -103,7 +103,7 @@ export default defineComponent({
     async onFetchApplications() {
       this.initializing = true;
       const { data: applications } = await applicationOperator.getAll({
-        user_id: this.$store.state.common.user.id,
+        user_id: this.$store.state.user.id,
         api_id: [MIDJOURNEY_CHANNEL_FAST.apiId, MIDJOURNEY_CHANNEL_RELAX.apiId, MIDJOURNEY_CHANNEL_TURBO.apiId]
       });
       this.initializing = false;
diff --git a/src/pages/midjourney/Index.vue b/src/pages/midjourney/Index.vue
index 9f2b9bc..0a6c757 100644
--- a/src/pages/midjourney/Index.vue
+++ b/src/pages/midjourney/Index.vue
@@ -177,7 +177,7 @@ export default defineComponent({
     async onFetchApplications() {
       this.initializing = true;
       const { data: applications } = await applicationOperator.getAll({
-        user_id: this.$store.state.common.user.id,
+        user_id: this.$store.state.user.id,
         api_id: [MIDJOURNEY_CHANNEL_FAST.apiId, MIDJOURNEY_CHANNEL_RELAX.apiId, MIDJOURNEY_CHANNEL_TURBO.apiId]
       });
       this.initializing = false;
diff --git a/src/store/chat/actions.ts b/src/store/chat/actions.ts
index 51c58f3..391172d 100644
--- a/src/store/chat/actions.ts
+++ b/src/store/chat/actions.ts
@@ -1,9 +1,77 @@
-import { IApplication } from '@/operators';
+import {
+  CHAT_MODEL_CHATGPT,
+  CHAT_MODEL_CHATGPT4,
+  CHAT_MODEL_CHATGPT4_BROWSING,
+  CHAT_MODEL_CHATGPT_16K,
+  CHAT_MODEL_CHATGPT_BROWSING,
+  IApplication,
+  IChatConversation,
+  apiUsageOperator,
+  applicationOperator,
+  chatOperator
+} from '@/operators';
+import { IRootState, Status } from '../common/models';
+import { ActionContext } from 'vuex';
+import { log } from '@/utils/log';
+import { IChatState } from './models';
 
-export const setApplications = async ({ commit }: any, payload: IApplication[]) => {
+export const setApplications = async ({ commit }: any, payload: IApplication[]): Promise<void> => {
   commit('setApplications', payload);
 };
 
+export const getApplications = async ({
+  commit,
+  rootState
+}: ActionContext<IChatState, IRootState>): Promise<IApplication[]> => {
+  log(getApplications, 'start to get application for chat');
+  commit('getApplicationsStatus', Status.Request);
+  const { data: applications } = await applicationOperator.getAll({
+    user_id: rootState.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
+    ]
+  });
+  log(getApplications, 'get application for chat success', applications);
+  commit('getApplicationsStatus', Status.Success);
+  commit('setApplications', applications?.items);
+  return applications.items;
+};
+
+export const getConversations = async ({
+  commit,
+  state,
+  rootState
+}: ActionContext<IChatState, IRootState>): Promise<IChatConversation[]> => {
+  log(getConversations, 'start to get conversations');
+  commit('setGetConversationStatus', Status.Success);
+  const {
+    data: { items: apiUsages }
+  } = await apiUsageOperator.getAll({
+    user_id: rootState.user.id,
+    // @ts-ignore
+    application_id: state.applications?.map((application) => application.id),
+    offset: 0,
+    limit: 30,
+    ordering: '-created_at'
+  });
+  log(getConversations, 'get api usages success', apiUsages);
+  commit('setGetConversationStatus', Status.Success);
+  // de duplicate conversations using id
+  const conversationIds: string[] = apiUsages.map((apiUsage) => apiUsage.metadata?.conversation_id).filter((id) => id);
+  const uniqueConversationIds = [...new Set(conversationIds)];
+  log(getConversations, 'get unique conversation ids', uniqueConversationIds);
+  const conversations = (await chatOperator.getConversations(uniqueConversationIds)).data;
+  log(getConversations, 'get conversations success', conversations);
+  commit('setConversations', conversations);
+  return conversations;
+};
+
 export default {
-  setApplications
+  setApplications,
+  getApplications,
+  getConversations
 };
diff --git a/src/store/chat/models.ts b/src/store/chat/models.ts
index 86c553d..6905ba3 100644
--- a/src/store/chat/models.ts
+++ b/src/store/chat/models.ts
@@ -1,7 +1,9 @@
-import { IApplication } from '@/operators';
+import { IApplication, IChatConversation } from '@/operators';
 import { Status } from '../common/models';
 
 export interface IChatState {
   applications: IApplication[] | undefined;
-  applicationsStatus: Status | undefined;
+  getApplicationsStatus: Status | undefined;
+  conversations: IChatConversation[] | undefined;
+  getConversationsStatus: Status | undefined;
 }
diff --git a/src/store/chat/mutations.ts b/src/store/chat/mutations.ts
index 0757fc9..87be386 100644
--- a/src/store/chat/mutations.ts
+++ b/src/store/chat/mutations.ts
@@ -6,11 +6,21 @@ export const setApplications = (state: IChatState, payload: IApplication[]): voi
   state.applications = payload;
 };
 
-export const setApplicationsStatus = (state: IChatState, payload: Status): void => {
-  state.applicationsStatus = payload;
+export const setGetApplicationsStatus = (state: IChatState, payload: Status): void => {
+  state.getApplicationsStatus = payload;
+};
+
+export const setConversations = (state: IChatState, payload: any): void => {
+  state.conversations = payload;
+};
+
+export const setGetConversationsStatus = (state: IChatState, payload: Status): void => {
+  state.getConversationsStatus = payload;
 };
 
 export default {
   setApplications,
-  setApplicationsStatus
+  setGetApplicationsStatus,
+  setConversations,
+  setGetConversationsStatus
 };
diff --git a/src/store/chat/state.ts b/src/store/chat/state.ts
index 0f986ff..e3f6899 100644
--- a/src/store/chat/state.ts
+++ b/src/store/chat/state.ts
@@ -3,6 +3,8 @@ import { IChatState } from './models';
 export default (): IChatState => {
   return {
     applications: undefined,
-    applicationsStatus: undefined
+    getApplicationsStatus: undefined,
+    conversations: undefined,
+    getConversationsStatus: undefined
   };
 };
diff --git a/src/store/common/actions.ts b/src/store/common/actions.ts
index c1f86e7..d039db1 100644
--- a/src/store/common/actions.ts
+++ b/src/store/common/actions.ts
@@ -1,6 +1,8 @@
 import { ActionContext } from 'vuex';
 import { IRootState, IToken } from '../common/models';
-import { IApplication, IUser } from '@/operators';
+import { IApplication, IUser, userOperator } from '@/operators';
+import { log } from '@/utils/log';
+import { oauthOperator } from '@/operators/auth/operator';
 
 export const resetToken = ({ commit }: ActionContext<IRootState, IRootState>) => {
   commit('resetToken');
@@ -14,13 +16,33 @@ export const setUser = ({ commit }: ActionContext<IRootState, IRootState>, paylo
   commit('setUser', payload);
 };
 
-export const setApplications = ({ commit }: ActionContext<IRootState, IRootState>, payload: IApplication[]) => {
-  commit('setApplications', payload);
+export const getUser = async ({ commit }: ActionContext<IRootState, IRootState>): Promise<IUser> => {
+  log(getUser, 'start to get user');
+  const { data: user } = await userOperator.getMe();
+  commit('setUser', user);
+  log(getUser, 'get user success', user);
+  return user;
+};
+
+export const getToken = async ({ commit }: ActionContext<IRootState, IRootState>, code: string): Promise<IToken> => {
+  log(getToken, 'start to get token using code', code);
+  const { data } = await oauthOperator.token({
+    code
+  });
+  const token = {
+    access: data.access_token,
+    refresh: data.refresh_token,
+    expiration: data.expires_in
+  };
+  commit('setToken', token);
+  log(getToken, 'get token success', data);
+  return token;
 };
 
 export default {
   resetToken,
   setToken,
   setUser,
-  setApplications
+  getToken,
+  getUser
 };
diff --git a/src/store/common/getters.ts b/src/store/common/getters.ts
index ab8ccde..6c8c5fc 100644
--- a/src/store/common/getters.ts
+++ b/src/store/common/getters.ts
@@ -16,14 +16,9 @@ export const setting = (state: IRootState): any => {
   return state.setting;
 };
 
-export const applications = (state: IRootState): any => {
-  return state.applications;
-};
-
 export default {
   authenticated,
   user,
   token,
-  setting,
-  applications
+  setting
 };
diff --git a/src/store/common/models.ts b/src/store/common/models.ts
index aab78e2..d563c1a 100644
--- a/src/store/common/models.ts
+++ b/src/store/common/models.ts
@@ -11,6 +11,7 @@ export enum Status {
 export interface IToken {
   access?: string;
   refresh?: string;
+  expiration?: number;
 }
 
 export interface ISetting {
@@ -22,7 +23,6 @@ export interface ICommonState {
   token: IToken;
   user: IUser;
   setting: ISetting;
-  applications: IApplication[] | undefined;
 }
 
 export interface IRootState extends ICommonState {
diff --git a/src/store/common/mutations.ts b/src/store/common/mutations.ts
index ec1d0a2..6da9b99 100644
--- a/src/store/common/mutations.ts
+++ b/src/store/common/mutations.ts
@@ -26,14 +26,9 @@ export const setSetting = (state: IRootState, payload: any): void => {
   };
 };
 
-export const setApplications = (state: IRootState, payload: any): void => {
-  state.applications = payload;
-};
-
 export default {
   setUser,
   setToken,
   resetToken,
-  setSetting,
-  setApplications
+  setSetting
 };
diff --git a/src/store/common/state.ts b/src/store/common/state.ts
index efc9f16..129a1db 100644
--- a/src/store/common/state.ts
+++ b/src/store/common/state.ts
@@ -6,12 +6,12 @@ export default (): IRootState => {
     user: {},
     token: {
       access: undefined,
-      refresh: undefined
+      refresh: undefined,
+      expiration: undefined
     },
     setting: {
       endpoint: ENDPOINT,
       stream: false
-    },
-    applications: undefined
+    }
   };
 };
diff --git a/src/utils/log.ts b/src/utils/log.ts
new file mode 100644
index 0000000..5ada07d
--- /dev/null
+++ b/src/utils/log.ts
@@ -0,0 +1,3 @@
+export const log = (func: Function, ...arg: any) => {
+  console.debug(`${func.name}`, ...arg);
+};