refactor

frontend/src/pages/Chat.tsx

@@ -18,19 +18,19 @@ import {CopyButton} from '../components/CopyButton';
 import {ReadButton} from '../components/ReadButton';
 import {toast} from 'react-toastify';
 
-const userName = 'M E';
+export const userName = 'M E';
-const botName = 'A I';
+export const botName = 'A I';
 
-enum MessageType {
+export enum MessageType {
   Normal,
   Error
 }
 
-type Side = 'left' | 'right'
+export type Side = 'left' | 'right'
 
-type Color = 'neutral' | 'brand' | 'colorful'
+export type Color = 'neutral' | 'brand' | 'colorful'
 
-type MessageItem = {
+export type MessageItem = {
   sender: string,
   type: MessageType,
   color: Color,
@@ -41,14 +41,36 @@ type MessageItem = {
   done: boolean
 }
 
-type Conversations = {
+export type Conversations = {
   [uuid: string]: MessageItem
 }
 
 const ChatPanel: FC = observer(() => {
   const {t} = useTranslation();
   const [message, setMessage] = useState('');
-  const [conversations, setConversations] = useState<Conversations>({
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
+  const sseControllerRef = useRef<AbortController | null>(null);
+
+  let lastMessageId: string;
+  let generating: boolean = false;
+  if (commonStore.conversationsOrder.length > 0) {
+    lastMessageId = commonStore.conversationsOrder[commonStore.conversationsOrder.length - 1];
+    const lastMessage = commonStore.conversations[lastMessageId];
+    if (lastMessage.sender === botName)
+      generating = !lastMessage.done;
+  }
+
+  useEffect(() => {
+    if (inputRef.current)
+      inputRef.current.style.maxHeight = '16rem';
+  }, []);
+
+  useEffect(() => {
+    if (commonStore.conversationsOrder.length === 0) {
+      commonStore.setConversationsOrder(['welcome']);
+      commonStore.setConversations({
         'welcome': {
           sender: botName,
           type: MessageType.Normal,
@@ -60,24 +82,7 @@ const ChatPanel: FC = observer(() => {
           done: true
         }
       });
-  const [conversationsOrder, setConversationsOrder] = useState<string[]>(['welcome']);
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
-  const sseControllerRef = useRef<AbortController | null>(null);
-
-  let lastMessageId: string;
-  let generating: boolean = false;
-  if (conversationsOrder.length > 0) {
-    lastMessageId = conversationsOrder[conversationsOrder.length - 1];
-    const lastMessage = conversations[lastMessageId];
-    if (lastMessage.sender === botName)
-      generating = !lastMessage.done;
     }
-
-  useEffect(() => {
-    if (inputRef.current)
-      inputRef.current.style.maxHeight = '16rem';
   }, []);
 
   const scrollToBottom = () => {
@@ -101,7 +106,7 @@ const ChatPanel: FC = observer(() => {
 
   const onSubmit = (message: string) => {
     const newId = uuid();
-    conversations[newId] = {
+    commonStore.conversations[newId] = {
       sender: userName,
       type: MessageType.Normal,
       color: 'brand',
@@ -110,17 +115,17 @@ const ChatPanel: FC = observer(() => {
       side: 'right',
       done: true
     };
-    setConversations(conversations);
+    commonStore.setConversations(commonStore.conversations);
-    conversationsOrder.push(newId);
+    commonStore.conversationsOrder.push(newId);
-    setConversationsOrder(conversationsOrder);
+    commonStore.setConversationsOrder(commonStore.conversationsOrder);
 
     const records: Record[] = [];
-    conversationsOrder.forEach((uuid, index) => {
+    commonStore.conversationsOrder.forEach((uuid, index) => {
-      const conversation = conversations[uuid];
+      const conversation = commonStore.conversations[uuid];
       if (conversation.done && conversation.type === MessageType.Normal && conversation.sender === botName) {
         if (index > 0) {
-          const questionId = conversationsOrder[index - 1];
+          const questionId = commonStore.conversationsOrder[index - 1];
-          const question = conversations[questionId];
+          const question = commonStore.conversations[questionId];
           if (question.done && question.type === MessageType.Normal && question.sender === userName) {
             records.push({question: question.content, answer: conversation.content});
           }
@@ -131,7 +136,7 @@ const ChatPanel: FC = observer(() => {
     (messages as ConversationPair[]).push({role: 'user', content: message});
 
     const answerId = uuid();
-    conversations[answerId] = {
+    commonStore.conversations[answerId] = {
       sender: botName,
       type: MessageType.Normal,
       color: 'colorful',
@@ -141,9 +146,9 @@ const ChatPanel: FC = observer(() => {
       side: 'left',
       done: false
     };
-    setConversations(conversations);
+    commonStore.setConversations(commonStore.conversations);
-    conversationsOrder.push(answerId);
+    commonStore.conversationsOrder.push(answerId);
-    setConversationsOrder(conversationsOrder);
+    commonStore.setConversationsOrder(commonStore.conversationsOrder);
     setTimeout(scrollToBottom);
     let answer = '';
     sseControllerRef.current = new AbortController();
@@ -164,9 +169,9 @@ const ChatPanel: FC = observer(() => {
           console.log('sse message', e);
           scrollToBottom();
           if (e.data === '[DONE]') {
-            conversations[answerId].done = true;
+            commonStore.conversations[answerId].done = true;
-            setConversations(conversations);
+            commonStore.setConversations(commonStore.conversations);
-            setConversationsOrder([...conversationsOrder]);
+            commonStore.setConversationsOrder([...commonStore.conversationsOrder]);
             return;
           }
           let data;
@@ -178,19 +183,19 @@ const ChatPanel: FC = observer(() => {
           }
           if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
             answer += data.choices[0]?.delta?.content || '';
-            conversations[answerId].content = answer;
+            commonStore.conversations[answerId].content = answer;
-            setConversations(conversations);
+            commonStore.setConversations(commonStore.conversations);
-            setConversationsOrder([...conversationsOrder]);
+            commonStore.setConversationsOrder([...commonStore.conversationsOrder]);
           }
         },
         onclose() {
           console.log('Connection closed');
         },
         onerror(err) {
-          conversations[answerId].type = MessageType.Error;
+          commonStore.conversations[answerId].type = MessageType.Error;
-          conversations[answerId].done = true;
+          commonStore.conversations[answerId].done = true;
-          setConversations(conversations);
+          commonStore.setConversations(commonStore.conversations);
-          setConversationsOrder([...conversationsOrder]);
+          commonStore.setConversationsOrder([...commonStore.conversationsOrder]);
           throw err;
         }
       });
@@ -199,8 +204,8 @@ const ChatPanel: FC = observer(() => {
   return (
     <div className="flex flex-col w-full grow gap-4 pt-4 overflow-hidden">
       <div ref={bodyRef} className="grow overflow-y-scroll overflow-x-hidden pr-2">
-        {conversationsOrder.map((uuid, index) => {
+        {commonStore.conversationsOrder.map((uuid, index) => {
-          const conversation = conversations[uuid];
+          const conversation = commonStore.conversations[uuid];
           return <div
             key={uuid}
             className={classnames(
@@ -250,8 +255,8 @@ const ChatPanel: FC = observer(() => {
                        icon={<Delete28Regular/>}
                        size="large" shape="circular" appearance="subtle"
                        onClick={(e) => {
-                         setConversations({});
+                         commonStore.setConversations({});
-                         setConversationsOrder([]);
+                         commonStore.setConversationsOrder([]);
                        }}
         />
         <Textarea
@@ -270,10 +275,10 @@ const ChatPanel: FC = observer(() => {
                          if (generating) {
                            sseControllerRef.current?.abort();
                            if (lastMessageId) {
-                             conversations[lastMessageId].type = MessageType.Error;
+                             commonStore.conversations[lastMessageId].type = MessageType.Error;
-                             conversations[lastMessageId].done = true;
+                             commonStore.conversations[lastMessageId].done = true;
-                             setConversations(conversations);
+                             commonStore.setConversations(commonStore.conversations);
-                             setConversationsOrder([...conversationsOrder]);
+                             commonStore.setConversationsOrder([...commonStore.conversationsOrder]);
                            }
                          } else {
                            handleKeyDownOrClick(e);

frontend/src/pages/Configs.tsx

@@ -4,7 +4,7 @@ import React, {FC} from 'react';
 import {Section} from '../components/Section';
 import {Labeled} from '../components/Labeled';
 import {ToolTipButton} from '../components/ToolTipButton';
-import commonStore, {ApiParameters, Device, ModelParameters, Precision} from '../stores/commonStore';
+import commonStore from '../stores/commonStore';
 import {observer} from 'mobx-react-lite';
 import {toast} from 'react-toastify';
 import {ValuedSlider} from '../components/ValuedSlider';
@@ -18,6 +18,57 @@ import manifest from '../../../manifest.json';
 import {getStrategy, refreshLocalModels} from '../utils';
 import {useTranslation} from 'react-i18next';
 
+export type ApiParameters = {
+  apiPort: number
+  maxResponseToken: number;
+  temperature: number;
+  topP: number;
+  presencePenalty: number;
+  frequencyPenalty: number;
+}
+
+export type Device = 'CPU' | 'CUDA';
+export type Precision = 'fp16' | 'int8' | 'fp32';
+
+export type ModelParameters = {
+  // different models can not have the same name
+  modelName: string;
+  device: Device;
+  precision: Precision;
+  storedLayers: number;
+  maxStoredLayers: number;
+  enableHighPrecisionForLastLayer: boolean;
+}
+
+export type ModelConfig = {
+  // different configs can have the same name
+  name: string;
+  apiParameters: ApiParameters
+  modelParameters: ModelParameters
+}
+
+export const defaultModelConfigs: ModelConfig[] = [
+  {
+    name: 'Default',
+    apiParameters: {
+      apiPort: 8000,
+      maxResponseToken: 4100,
+      temperature: 1,
+      topP: 1,
+      presencePenalty: 0,
+      frequencyPenalty: 0
+    },
+    modelParameters: {
+      modelName: 'RWKV-4-Raven-1B5-v11-Eng99%-Other1%-20230425-ctx4096.pth',
+      device: 'CUDA',
+      precision: 'fp16',
+      storedLayers: 25,
+      maxStoredLayers: 25,
+      enableHighPrecisionForLastLayer: false
+    }
+  }
+];
+
 export const Configs: FC = observer(() => {
   const {t} = useTranslation();
   const [selectedIndex, setSelectedIndex] = React.useState(commonStore.currentModelConfigIndex);

frontend/src/pages/Downloads.tsx

@@ -9,6 +9,18 @@ import {ToolTipButton} from '../components/ToolTipButton';
 import {Folder20Regular, Pause20Regular, Play20Regular} from '@fluentui/react-icons';
 import {ContinueDownload, OpenFileFolder, PauseDownload} from '../../wailsjs/go/backend_golang/App';
 
+export type DownloadStatus = {
+  name: string;
+  path: string;
+  url: string;
+  transferred: number;
+  size: number;
+  speed: number;
+  progress: number;
+  downloading: boolean;
+  done: boolean;
+}
+
 export const Downloads: FC = observer(() => {
   const {t} = useTranslation();
   const finishedDownloads = commonStore.downloadList.filter((status) => status.done).length;

frontend/src/pages/Models.tsx

@@ -15,7 +15,7 @@ import {
 import {ToolTipButton} from '../components/ToolTipButton';
 import {ArrowClockwise20Regular, ArrowDownload20Regular, Folder20Regular, Open20Regular} from '@fluentui/react-icons';
 import {observer} from 'mobx-react-lite';
-import commonStore, {ModelSourceItem} from '../stores/commonStore';
+import commonStore from '../stores/commonStore';
 import {BrowserOpenURL} from '../../wailsjs/runtime';
 import {AddToDownloadList, OpenFileFolder} from '../../wailsjs/go/backend_golang/App';
 import manifest from '../../../manifest.json';
@@ -24,6 +24,18 @@ import {bytesToGb, refreshModels, saveConfigs, toastWithButton} from '../utils';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
 
+export type ModelSourceItem = {
+  name: string;
+  size: number;
+  lastUpdated: string;
+  desc?: { [lang: string]: string; };
+  SHA256?: string;
+  url?: string;
+  downloadUrl?: string;
+  isLocal?: boolean;
+  lastUpdatedMs?: number;
+};
+
 const columns: TableColumnDefinition<ModelSourceItem>[] = [
   createTableColumn<ModelSourceItem>({
     columnId: 'file',

frontend/src/pages/Settings.tsx

@@ -5,7 +5,20 @@ import {Labeled} from '../components/Labeled';
 import commonStore from '../stores/commonStore';
 import {observer} from 'mobx-react-lite';
 import {useTranslation} from 'react-i18next';
-import {checkUpdate, Language, Languages} from '../utils';
+import {checkUpdate} from '../utils';
+
+export const Languages = {
+  dev: 'English', // i18n default
+  zh: '简体中文'
+};
+
+export type Language = keyof typeof Languages;
+
+export type Settings = {
+  language: Language,
+  darkMode: boolean
+  autoUpdatesCheck: boolean
+}
 
 export const Settings: FC = observer(() => {
   const {t, i18n} = useTranslation();

frontend/src/startup.ts

@@ -1,8 +1,9 @@
-import commonStore, {defaultModelConfigs} from './stores/commonStore';
+import commonStore from './stores/commonStore';
 import {ReadJson} from '../wailsjs/go/backend_golang/App';
 import {checkUpdate, downloadProgramFiles, LocalConfig, refreshModels} from './utils';
 import {getStatus} from './apis';
 import {EventsOn} from '../wailsjs/runtime';
+import {defaultModelConfigs} from './pages/Configs';
 
 export async function startup() {
   downloadProgramFiles();

frontend/src/stores/commonStore.ts

@@ -1,7 +1,12 @@
 import {makeAutoObservable} from 'mobx';
-import {getUserLanguage, isSystemLightMode, saveConfigs, Settings} from '../utils';
+import {getUserLanguage, isSystemLightMode, saveConfigs} from '../utils';
 import {WindowSetDarkTheme, WindowSetLightTheme} from '../../wailsjs/runtime';
 import manifest from '../../../manifest.json';
+import {defaultModelConfigs, ModelConfig} from '../pages/Configs';
+import {Conversations} from '../pages/Chat';
+import {ModelSourceItem} from '../pages/Models';
+import {DownloadStatus} from '../pages/Downloads';
+import {Settings} from '../pages/Settings';
 
 export enum ModelStatus {
   Offline,
@@ -10,99 +15,41 @@ export enum ModelStatus {
   Working,
 }
 
-export type ModelSourceItem = {
-  name: string;
-  size: number;
-  lastUpdated: string;
-  desc?: { [lang: string]: string; };
-  SHA256?: string;
-  url?: string;
-  downloadUrl?: string;
-  isLocal?: boolean;
-  lastUpdatedMs?: number;
-};
-
-export type ApiParameters = {
-  apiPort: number
-  maxResponseToken: number;
-  temperature: number;
-  topP: number;
-  presencePenalty: number;
-  frequencyPenalty: number;
-}
-
-export type Device = 'CPU' | 'CUDA';
-export type Precision = 'fp16' | 'int8' | 'fp32';
-
-export type ModelParameters = {
-  // different models can not have the same name
-  modelName: string;
-  device: Device;
-  precision: Precision;
-  storedLayers: number;
-  maxStoredLayers: number;
-  enableHighPrecisionForLastLayer: boolean;
-}
-
-export type ModelConfig = {
-  // different configs can have the same name
-  name: string;
-  apiParameters: ApiParameters
-  modelParameters: ModelParameters
-}
-
-export type DownloadStatus = {
-  name: string;
-  path: string;
-  url: string;
-  transferred: number;
-  size: number;
-  speed: number;
-  progress: number;
-  downloading: boolean;
-  done: boolean;
-}
-
-export const defaultModelConfigs: ModelConfig[] = [
-  {
-    name: 'Default',
-    apiParameters: {
-      apiPort: 8000,
-      maxResponseToken: 4100,
-      temperature: 1,
-      topP: 1,
-      presencePenalty: 0,
-      frequencyPenalty: 0
-    },
-    modelParameters: {
-      modelName: 'RWKV-4-Raven-1B5-v11-Eng99%-Other1%-20230425-ctx4096.pth',
-      device: 'CUDA',
-      precision: 'fp16',
-      storedLayers: 25,
-      maxStoredLayers: 25,
-      enableHighPrecisionForLastLayer: false
-    }
-  }
-];
-
 class CommonStore {
   constructor() {
     makeAutoObservable(this);
   }
 
+  // global
   modelStatus: ModelStatus = ModelStatus.Offline;
+
+  // home
+  introduction: { [lang: string]: string } = manifest.introduction;
+
+  // chat
+  conversations: Conversations = {};
+  conversationsOrder: string[] = [];
+
+  // configs
   currentModelConfigIndex: number = 0;
   modelConfigs: ModelConfig[] = [];
+
+  // models
   modelSourceManifestList: string = 'https://cdn.jsdelivr.net/gh/josstorer/RWKV-Runner/manifest.json;';
   modelSourceList: ModelSourceItem[] = [];
+
+  // downloads
+  downloadList: DownloadStatus[] = [];
+
+  // settings
   settings: Settings = {
     language: getUserLanguage(),
     darkMode: !isSystemLightMode(),
     autoUpdatesCheck: true
   };
-  introduction: { [lang: string]: string } = manifest.introduction;
+
+  // about
   about: { [lang: string]: string } = manifest.about;
-  downloadList: DownloadStatus[] = [];
 
   getCurrentModelConfig = () => {
     return this.modelConfigs[this.currentModelConfigIndex];
@@ -184,6 +131,14 @@ class CommonStore {
   setDownloadList = (value: DownloadStatus[]) => {
     this.downloadList = value;
   };
+
+  setConversations = (value: Conversations) => {
+    this.conversations = value;
+  };
+
+  setConversationsOrder = (value: string[]) => {
+    this.conversationsOrder = value;
+  };
 }
 
 export default new CommonStore();

frontend/src/utils/index.tsx

@@ -8,29 +8,19 @@ import {
   UpdateApp
 } from '../../wailsjs/go/backend_golang/App';
 import manifest from '../../../manifest.json';
-import commonStore, {ModelConfig, ModelParameters, ModelSourceItem} from '../stores/commonStore';
+import commonStore from '../stores/commonStore';
 import {toast} from 'react-toastify';
 import {t} from 'i18next';
 import {ToastOptions} from 'react-toastify/dist/types';
 import {Button} from '@fluentui/react-components';
-
+import {Language, Languages, Settings} from '../pages/Settings';
-export const Languages = {
+import {ModelSourceItem} from '../pages/Models';
-  dev: 'English', // i18n default
+import {ModelConfig, ModelParameters} from '../pages/Configs';
-  zh: '简体中文'
-};
-
-export type Language = keyof typeof Languages;
 
 export type Cache = {
   models: ModelSourceItem[]
 }
 
-export type Settings = {
-  language: Language,
-  darkMode: boolean
-  autoUpdatesCheck: boolean
-}
-
 export type LocalConfig = {
   modelSourceManifestList: string
   currentModelConfigIndex: number