update

frontend/src/pages/Chat.tsx

@@ -1,10 +1,13 @@
 import React, {FC} from 'react';
-import {Text} from '@fluentui/react-components';
+import {Page} from '../components/Page';
+import {PresenceBadge} from '@fluentui/react-components';
 
 export const Chat: FC = () => {
   return (
-    <div className="flex flex-col box-border gap-5 p-2">
-      <Text size={600}>In Development</Text>
-    </div>
+    <Page title="Chat" content={
+      <div className="flex flex-col gap-2 overflow-hidden">
+        <PresenceBadge/>
+      </div>
+    }/>
   );
 };

frontend/src/pages/Models.tsx

@@ -21,7 +21,7 @@ import {DownloadFile, OpenFileFolder} from '../../wailsjs/go/backend_golang/App'
 import manifest from '../../../manifest.json';
 import {toast} from 'react-toastify';
 import {Page} from '../components/Page';
-import {refreshModels} from '../utils';
+import {refreshModels, saveConfigs} from '../utils';
 
 const columns: TableColumnDefinition<ModelSourceItem>[] = [
   createTableColumn<ModelSourceItem>({
@@ -134,6 +134,7 @@ export const Models: FC = observer(() => {
             <Text weight="medium">Model Source Manifest List</Text>
             <ToolTipButton desc="Refresh" icon={<ArrowClockwise20Regular/>} onClick={() => {
               refreshModels(false);
+              saveConfigs();
             }}/>
           </div>
           <Text size={100}>

frontend/src/pages/Settings.tsx

@@ -1,10 +1,40 @@
 import React, {FC} from 'react';
-import {Text} from '@fluentui/react-components';
+import {Page} from '../components/Page';
+import {Dropdown, Option, Switch} from '@fluentui/react-components';
+import {Labeled} from '../components/Labeled';
+import commonStore from '../stores/commonStore';
+import {observer} from 'mobx-react-lite';
 
-export const Settings: FC = () => {
+export const Settings: FC = observer(() => {
   return (
-    <div className="flex flex-col box-border gap-5 p-2">
-      <Text size={600}>In Development</Text>
-    </div>
+    <Page title="Settings" content={
+      <div className="flex flex-col gap-2 overflow-hidden">
+        <Labeled label="Language" flex spaceBetween content={
+          <Dropdown style={{minWidth: 0}} listbox={{style: {minWidth: 0}}}
+                    value="English"
+                    selectedOptions={['English']}
+                    onOptionSelect={(_, data) => {
+                      if (data.optionText) {
+                      }
+                    }}>
+            <Option>English</Option>
+            <Option>简体中文</Option>
+          </Dropdown>
+        }/>
+        <Labeled label="Dark Mode" flex spaceBetween content={
+          <Switch checked={commonStore.settings.darkMode}
+                  onChange={(e, data) => {
+                    commonStore.setSettings({
+                      darkMode: data.checked
+                    });
+                  }}/>
+        }/>
+        <Labeled label="Automatic Updates Check" flex spaceBetween content={
+          <Switch checked={commonStore.settings.autoUpdatesCheck}
+                  onChange={(e, data) => {
+                  }}/>
+        }/>
+      </div>
+    }/>
   );
-};
+});