update

frontend/src/pages/Chat.tsx

@@ -1,16 +1,49 @@
 import React, {FC} from 'react';
-import {Page} from '../components/Page';
-import {PresenceBadge} from '@fluentui/react-components';
 import {useTranslation} from 'react-i18next';
+import {RunButton} from '../components/RunButton';
+import {Divider, PresenceBadge, Text} from '@fluentui/react-components';
+import commonStore, {ModelStatus} from '../stores/commonStore';
+import {observer} from 'mobx-react-lite';
+import {PresenceBadgeStatus} from '@fluentui/react-badge';
+import {ConfigSelector} from '../components/ConfigSelector';
 
-export const Chat: FC = () => {
+const ChatPanel: FC = () => {
+  return (
+    <div></div>
+  );
+};
+
+const statusText = {
+  [ModelStatus.Offline]: 'Offline',
+  [ModelStatus.Starting]: 'Starting',
+  [ModelStatus.Loading]: 'Loading',
+  [ModelStatus.Working]: 'Working'
+};
+
+const badgeStatus: { [modelStatus: number]: PresenceBadgeStatus } = {
+  [ModelStatus.Offline]: 'unknown',
+  [ModelStatus.Starting]: 'away',
+  [ModelStatus.Loading]: 'away',
+  [ModelStatus.Working]: 'available'
+};
+
+export const Chat: FC = observer(() => {
   const {t} = useTranslation();
 
   return (
-    <Page title={t('Chat')} content={
-      <div className="flex flex-col gap-2 overflow-hidden">
-        <PresenceBadge/>
+    <div className="flex flex-col gap-1 p-2 h-full overflow-hidden">
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-2">
+          <PresenceBadge status={badgeStatus[commonStore.modelStatus]}/>
+          <Text size={100}>{t('Model Status') + ': ' + t(statusText[commonStore.modelStatus])}</Text>
+        </div>
+        <div className="flex items-center gap-2">
+          <ConfigSelector size="small"/>
+          <RunButton iconMode/>
+        </div>
       </div>
-    }/>
+      <Divider style={{flexGrow: 0}}/>
+      <ChatPanel/>
+    </div>
   );
-};
+});

frontend/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import {CompoundButton, Dropdown, Link, Option, Text} from '@fluentui/react-components';
+import {CompoundButton, Link, Text} from '@fluentui/react-components';
 import React, {FC, ReactElement} from 'react';
 import banner from '../assets/images/banner.jpg';
 import {
@@ -8,12 +8,12 @@ import {
   Storage20Regular
 } from '@fluentui/react-icons';
 import {useNavigate} from 'react-router';
-import commonStore from '../stores/commonStore';
 import {observer} from 'mobx-react-lite';
 import {RunButton} from '../components/RunButton';
 import manifest from '../../../manifest.json';
 import {BrowserOpenURL} from '../../wailsjs/runtime';
 import {useTranslation} from 'react-i18next';
+import {ConfigSelector} from '../components/ConfigSelector';
 
 type NavCard = {
   label: string;
@@ -78,17 +78,7 @@ export const Home: FC = observer(() => {
       <div className="flex flex-col gap-2">
         <div className="flex flex-row-reverse sm:fixed bottom-2 right-2">
           <div className="flex gap-3">
-            <Dropdown style={{minWidth: 0}} listbox={{style: {minWidth: 0}}}
-                      value={commonStore.getCurrentModelConfig().name}
-                      selectedOptions={[commonStore.currentModelConfigIndex.toString()]}
-                      onOptionSelect={(_, data) => {
-                        if (data.optionValue)
-                          commonStore.setCurrentConfigIndex(Number(data.optionValue));
-                      }}>
-              {commonStore.modelConfigs.map((config, index) =>
-                <Option key={index} value={index.toString()}>{config.name}</Option>
-              )}
-            </Dropdown>
+            <ConfigSelector/>
             <RunButton/>
           </div>
         </div>

frontend/src/pages/Models.tsx

@@ -149,7 +149,7 @@ export const Models: FC = observer(() => {
     <Page title={t('Models')} content={
       <div className="flex flex-col gap-2 overflow-hidden">
         <div className="flex flex-col gap-1">
-          <div className="flex justify-between">
+          <div className="flex justify-between items-center">
             <Text weight="medium">{t('Model Source Manifest List')}</Text>
             <ToolTipButton desc={t('Refresh')} icon={<ArrowClockwise20Regular/>} onClick={() => {
               refreshModels(false);