Add optional moeflow-companion service

.dockerignore

@@ -15,10 +15,6 @@
 
 # misc
 **/.DS_Store
-**/.env.local
-**/.env.development.local
-**/.env.test.local
-**/.env.production.local
 
 **/npm-debug.log*
 **/yarn-debug.log*

.gitignore

@@ -28,3 +28,4 @@ yarn-error.log*
 .vscode/*
 .idea
 stats.html
+/public/moeflow-runtime-config.json

public/moeflow-runtime-config.sample.json

@@ -0,0 +1,6 @@
+{
+  "comment": "Runtime configuration overrides. See src/configs.tsx",
+  "moeflowCompanion": {
+    "gradioUrl": "http://localhost:7860"
+  }
+}

src/apis/index.ts

@@ -9,7 +9,7 @@ import axios, {
 import qs from 'qs';
 import { createElement } from 'react';
 import { Icon } from '../components';
-import { configs, runtimeConfig } from '@/configs';
+import { runtimeConfig } from '@/configs';
 import { createDebugLogger } from '@/utils/debug-logger';
 import { getIntl } from '@/locales';
 import store from '../store';

src/configs.tsx

@@ -1,8 +1,12 @@
 import { lazyThenable } from '@jokester/ts-commonutil/lib/concurrency/lazy-thenable';
 
-interface RuntimeConfig {
+export interface RuntimeConfig {
   // base URL for API requests
   baseURL: string;
+
+  moeflowCompanion?: {
+    gradioUrl?: string;
+  };
 }
 
 /**
@@ -16,7 +20,7 @@ export const runtimeConfig = lazyThenable<RuntimeConfig>(async () => {
   const overriden: RuntimeConfig = await fetch('/moeflow-runtime-config.json')
     .then((res) => res.json())
     .catch(() => null);
-  const merged = {
+  const merged: RuntimeConfig = {
     ...{
       // defaults
       baseURL: process.env.REACT_APP_BASE_URL || '/api/',

src/index.tsx

@@ -11,17 +11,20 @@ import App from './App';
 import './fontAwesome'; // Font Awesome
 import './index.css';
 import store from './store';
-import { setOSName, setPlatform } from './store/site/slice';
+import { setOSName, setPlatform, setRuntimeConfig } from './store/site/slice';
 import { setUserToken } from './store/user/slice';
 import { getToken } from './utils/cookie';
 import { OSName, Platform } from './interfaces';
+import { runtimeConfig } from './configs';
 import {
   getDefaultHotKey,
   hotKeyInitialState,
   HotKeyState,
   setHotKey,
 } from './store/hotKey/slice';
 import { loadHotKey } from './utils/storage';
+import { createDebugLogger } from './utils/debug-logger';
+const debugLogger = createDebugLogger('app');
 
 // 时间插件
 if (false && process.env.NODE_ENV === 'development') {
@@ -37,6 +40,7 @@ const platform = browser.getPlatformType() as Platform;
 const osName = browser.getOSName(true) as OSName;
 store.dispatch(setPlatform(platform));
 store.dispatch(setOSName(osName));
+store.dispatch(setRuntimeConfig(await runtimeConfig));
 // 恢复自定义快捷键
 for (const hotKeyName in hotKeyInitialState) {
   const name = hotKeyName as keyof HotKeyState;
@@ -57,6 +61,7 @@ for (const hotKeyName in hotKeyInitialState) {
 async function mountApp() {
   const { intlMessages, locale, antdLocale, antdValidateMessages } =
     await initI18n;
+  debugLogger('initial state', store.getState());
   /**
    * Set user token from cookie
    */

src/store/project/sagas.ts

@@ -34,7 +34,7 @@ function* setCurrentProjectWorker(
         configs: { cancelToken },
       });
       yield put(setCurrentProject(toLowerCamelCase(result.data)));
-    } catch (error) {
+    } catch (error: any) {
       error.default();
     } finally {
       if (yield cancelled()) {

src/store/projectSet/sagas.ts

@@ -16,7 +16,7 @@ function* setCurrentProjectSetWorker(
 ) {
   // 清空当前 projectSet
   yield put(clearCurrentProjectSet());
-  const projectSets = yield select(
+  const projectSets: UserProjectSet[] = yield select(
     (state: AppState) => state.projectSet.projectSets,
   );
   const projectSet = projectSets.find(
@@ -35,7 +35,7 @@ function* setCurrentProjectSetWorker(
           configs: { cancelToken },
         });
       yield put(setCurrentProjectSet(toLowerCamelCase(result.data)));
-    } catch (error) {
+    } catch (error: any) {
       error.default();
     } finally {
       if (yield cancelled()) {

src/store/site/slice.ts

@@ -1,18 +1,21 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { OSName, Platform } from '../../interfaces';
+import { OSName, Platform } from '@/interfaces';
+import { RuntimeConfig } from '@/configs';
 
 export interface SiteState {
-  osName?: OSName;
-  platform?: Platform;
+  osName: OSName;
+  platform: Platform;
   newInvitationsCount: number;
   relatedApplicationsCount: number;
+  runtimeConfig: RuntimeConfig;
 }
 
 const initialState: SiteState = {
-  osName: 'windows',
-  platform: 'desktop',
+  osName: null!,
+  platform: null!,
   relatedApplicationsCount: 0,
   newInvitationsCount: 0,
+  runtimeConfig: null!,
 };
 const slice = createSlice({
   name: 'site',
@@ -30,6 +33,9 @@ const slice = createSlice({
     setNewInvitationsCount(state, action: PayloadAction<number>) {
       state.newInvitationsCount = action.payload;
     },
+    setRuntimeConfig(state, action: PayloadAction<RuntimeConfig>) {
+      state.runtimeConfig = action.payload;
+    },
   },
 });
 
@@ -38,5 +44,6 @@ export const {
   setOSName,
   setRelatedApplicationsCount,
   setNewInvitationsCount,
+  setRuntimeConfig,
 } = slice.actions;
 export default slice.reducer;

src/store/user/sagas.ts

@@ -10,6 +10,7 @@ import type { Axios } from 'axios';
 function* getUserInfoAsync(action: ReturnType<typeof setUserToken>) {
   const token = action.payload.token;
   const instance: Axios = yield api.getAxiosInstance();
+  // console.debug('instance', instance);
   if (token === '') {
     // 清除 Axios Authorization 头
     delete instance.defaults.headers.common['Authorization'];