From bb8d121991b48ee04ddee2f303d8f4fd0209f1cf Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Fri, 19 May 2023 10:08:28 +0800
Subject: [PATCH] update

---
 frontend/src/_locales/zh-hans/main.json    |  5 ++-
 frontend/src/components/ConfigSelector.tsx | 18 ++++++++
 frontend/src/components/RunButton.tsx      | 42 ++++++++++++++-----
 frontend/src/components/ToolTipButton.tsx  | 11 ++++-
 frontend/src/pages/Chat.tsx                | 49 ++++++++++++++++++----
 frontend/src/pages/Home.tsx                | 16 ++-----
 frontend/src/pages/Models.tsx              |  2 +-
 7 files changed, 107 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/components/ConfigSelector.tsx

diff --git a/frontend/src/_locales/zh-hans/main.json b/frontend/src/_locales/zh-hans/main.json
index 94188cc..b20c438 100644
--- a/frontend/src/_locales/zh-hans/main.json
+++ b/frontend/src/_locales/zh-hans/main.json
@@ -7,8 +7,10 @@
   "Manage your configs": "管理你的配置",
   "Manage models": "管理模型",
   "Run": "运行",
+  "Offline": "离线",
   "Starting": "启动中",
   "Loading": "读取模型中",
+  "Working": "运行中",
   "Stop": "停止",
   "Enable High Precision For Last Layer": "输出层使用高精度",
   "Stored Layers": "载入显存层数",
@@ -60,5 +62,6 @@
   "Start Converting": "开始转换",
   "Convert Success": "转换成功",
   "Convert Failed": "转换失败",
-  "Model Not Found": "模型不存在"
+  "Model Not Found": "模型不存在",
+  "Model Status": "模型状态"
 }
\ No newline at end of file
diff --git a/frontend/src/components/ConfigSelector.tsx b/frontend/src/components/ConfigSelector.tsx
new file mode 100644
index 0000000..b916ad5
--- /dev/null
+++ b/frontend/src/components/ConfigSelector.tsx
@@ -0,0 +1,18 @@
+import {FC} from 'react';
+import {observer} from 'mobx-react-lite';
+import {Dropdown, Option} from '@fluentui/react-components';
+import commonStore from '../stores/commonStore';
+
+export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = observer(({size}) => {
+  return <Dropdown size={size} 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>;
+});
\ No newline at end of file
diff --git a/frontend/src/components/RunButton.tsx b/frontend/src/components/RunButton.tsx
index b601d07..63bfdef 100644
--- a/frontend/src/components/RunButton.tsx
+++ b/frontend/src/components/RunButton.tsx
@@ -1,4 +1,4 @@
-import React, {FC, MouseEventHandler} from 'react';
+import React, {FC, MouseEventHandler, ReactElement} from 'react';
 import commonStore, {ModelStatus} from '../stores/commonStore';
 import {StartServer} from '../../wailsjs/go/backend_golang/App';
 import {Button} from '@fluentui/react-components';
@@ -9,6 +9,8 @@ import manifest from '../../../manifest.json';
 import {getStrategy} from '../utils';
 import {useTranslation} from 'react-i18next';
 import {t} from 'i18next';
+import {ToolTipButton} from './ToolTipButton';
+import {Play16Regular, Stop16Regular} from '@fluentui/react-icons';
 
 const mainButtonText = {
   [ModelStatus.Offline]: 'Run',
@@ -17,6 +19,13 @@ const mainButtonText = {
   [ModelStatus.Working]: 'Stop'
 };
 
+const iconModeButtonIcon: { [modelStatus: number]: ReactElement } = {
+  [ModelStatus.Offline]: <Play16Regular/>,
+  [ModelStatus.Starting]: <Stop16Regular/>,
+  [ModelStatus.Loading]: <Stop16Regular/>,
+  [ModelStatus.Working]: <Stop16Regular/>
+};
+
 const onClickMainButton = async () => {
   const modelConfig = commonStore.getCurrentModelConfig();
   const port = modelConfig.apiParameters.apiPort;
@@ -74,17 +83,28 @@ const onClickMainButton = async () => {
   }
 };
 
-export const RunButton: FC<{ onClickRun?: MouseEventHandler }> = observer(({onClickRun}) => {
+export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean }>
+  = observer(({
+                onClickRun,
+                iconMode
+              }) => {
   const {t} = useTranslation();
 
-  return (
-    <Button disabled={commonStore.modelStatus === ModelStatus.Starting} appearance="primary" size="large"
-            onClick={async (e) => {
-              if (commonStore.modelStatus === ModelStatus.Offline)
-                await onClickRun?.(e);
-              await onClickMainButton();
-            }}>
-      {t(mainButtonText[commonStore.modelStatus])}
-    </Button>
+  const onClick = async (e: any) => {
+    if (commonStore.modelStatus === ModelStatus.Offline)
+      await onClickRun?.(e);
+    await onClickMainButton();
+  };
+
+  return (iconMode ?
+      <ToolTipButton disabled={commonStore.modelStatus === ModelStatus.Starting}
+                     icon={iconModeButtonIcon[commonStore.modelStatus]}
+                     desc={t(mainButtonText[commonStore.modelStatus])}
+                     size="small" onClick={onClick}/>
+      :
+      <Button disabled={commonStore.modelStatus === ModelStatus.Starting} appearance="primary" size="large"
+              onClick={onClick}>
+        {t(mainButtonText[commonStore.modelStatus])}
+      </Button>
   );
 });
diff --git a/frontend/src/components/ToolTipButton.tsx b/frontend/src/components/ToolTipButton.tsx
index 993ed46..ef00322 100644
--- a/frontend/src/components/ToolTipButton.tsx
+++ b/frontend/src/components/ToolTipButton.tsx
@@ -2,16 +2,23 @@ import React, {FC, MouseEventHandler, ReactElement} from 'react';
 import {Button, Tooltip} from '@fluentui/react-components';
 
 export const ToolTipButton: FC<{
-  text?: string | null, desc: string, icon?: ReactElement, onClick?: MouseEventHandler
+  text?: string | null,
+  desc: string,
+  icon?: ReactElement,
+  size?: 'small' | 'medium' | 'large',
+  disabled?: boolean,
+  onClick?: MouseEventHandler
 }> = ({
         text,
         desc,
         icon,
+        size,
+        disabled,
         onClick
       }) => {
   return (
     <Tooltip content={desc} showDelay={0} hideDelay={0} relationship="label">
-      <Button icon={icon} onClick={onClick}>{text}</Button>
+      <Button disabled={disabled} icon={icon} onClick={onClick} size={size}>{text}</Button>
     </Tooltip>
   );
 };
diff --git a/frontend/src/pages/Chat.tsx b/frontend/src/pages/Chat.tsx
index e64caa3..4e85c9d 100644
--- a/frontend/src/pages/Chat.tsx
+++ b/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>
   );
-};
+});
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index f9f0489..44705e3 100644
--- a/frontend/src/pages/Home.tsx
+++ b/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>
diff --git a/frontend/src/pages/Models.tsx b/frontend/src/pages/Models.tsx
index 210b411..d1b6ff0 100644
--- a/frontend/src/pages/Models.tsx
+++ b/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);