From 3cef51144f876f2c9639940d2c98f5a2a845b043 Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Tue, 26 Mar 2024 21:25:13 +0800
Subject: [PATCH] improve DialogButton

---
 frontend/src/components/DialogButton.tsx      | 39 ++++++++++++-------
 .../src/components/ResetConfigsButton.tsx     |  2 +-
 frontend/src/pages/Chat.tsx                   |  2 +-
 frontend/src/pages/Completion.tsx             |  2 +-
 frontend/src/pages/Composition.tsx            |  2 +-
 frontend/src/pages/Train.tsx                  |  2 +-
 6 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/DialogButton.tsx b/frontend/src/components/DialogButton.tsx
index 20abc3e..1e65499 100644
--- a/frontend/src/components/DialogButton.tsx
+++ b/frontend/src/components/DialogButton.tsx
@@ -16,20 +16,28 @@ import { LazyImportComponent } from './LazyImportComponent';
 const MarkdownRender = React.lazy(() => import('./MarkdownRender'));
 
 export const DialogButton: FC<{
-  text?: string | null
+  text?: string | null,
   icon?: ReactElement,
   tooltip?: string | null,
   className?: string,
   title: string,
-  contentText: string,
+  content?: string | ReactElement | null
   markdown?: boolean,
   onConfirm?: () => void,
   size?: 'small' | 'medium' | 'large',
   shape?: 'rounded' | 'circular' | 'square',
   appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent',
+  cancelButton?: boolean,
+  confirmButton?: boolean,
+  cancelButtonText?: string,
+  confirmButtonText?: string,
 }> = ({
-  text, icon, tooltip, className, title, contentText, markdown,
-  onConfirm, size, shape, appearance
+  text, icon, tooltip, className, title, content, markdown,
+  onConfirm, size, shape, appearance,
+  cancelButton = true,
+  confirmButton = true,
+  cancelButtonText = 'Cancel',
+  confirmButtonText = 'Confirm'
 }) => {
   const { t } = useTranslation();
 
@@ -48,19 +56,24 @@ export const DialogButton: FC<{
           {
             markdown ?
               <LazyImportComponent lazyChildren={MarkdownRender}>
-                {contentText}
+                {content}
               </LazyImportComponent> :
-              contentText
+              content
           }
         </DialogContent>
         <DialogActions>
-          <DialogTrigger disableButtonEnhancement>
-            <Button appearance="secondary">{t('Cancel')}</Button>
-          </DialogTrigger>
-          <DialogTrigger disableButtonEnhancement>
-            <Button appearance="primary" onClick={onConfirm}>{t('Confirm')}
-            </Button>
-          </DialogTrigger>
+          {cancelButton && (
+            <DialogTrigger disableButtonEnhancement>
+              <Button appearance="secondary">{t(cancelButtonText)}</Button>
+            </DialogTrigger>
+          )}
+          {confirmButton && (
+            <DialogTrigger disableButtonEnhancement>
+              <Button appearance="primary" onClick={onConfirm}>
+                {t(confirmButtonText)}
+              </Button>
+            </DialogTrigger>
+          )}
         </DialogActions>
       </DialogBody>
     </DialogSurface>
diff --git a/frontend/src/components/ResetConfigsButton.tsx b/frontend/src/components/ResetConfigsButton.tsx
index 896cb3e..ad9c991 100644
--- a/frontend/src/components/ResetConfigsButton.tsx
+++ b/frontend/src/components/ResetConfigsButton.tsx
@@ -9,7 +9,7 @@ import { defaultModelConfigs, defaultModelConfigsMac } from '../pages/defaultCon
 export const ResetConfigsButton: FC<{ afterConfirm?: () => void }> = ({ afterConfirm }) => {
   const { t } = useTranslation();
   return <DialogButton icon={<ArrowReset20Regular />} tooltip={t('Reset All Configs')} title={t('Reset All Configs')}
-    contentText={t('Are you sure you want to reset all configs? This will obtain the latest preset configs, but will override your custom configs and cannot be undone.')}
+    content={t('Are you sure you want to reset all configs? This will obtain the latest preset configs, but will override your custom configs and cannot be undone.')}
     onConfirm={() => {
       commonStore.setModelConfigs(commonStore.platform !== 'darwin' ? defaultModelConfigs : defaultModelConfigsMac, false);
       commonStore.setCurrentConfigIndex(0, true);
diff --git a/frontend/src/pages/Chat.tsx b/frontend/src/pages/Chat.tsx
index 03ff1db..0bedf8f 100644
--- a/frontend/src/pages/Chat.tsx
+++ b/frontend/src/pages/Chat.tsx
@@ -651,7 +651,7 @@ const ChatPanel: FC = observer(() => {
           <DialogButton tooltip={t('Clear')}
             icon={<Delete28Regular />}
             size={mq ? 'large' : 'small'} shape="circular" appearance="subtle" title={t('Clear')}
-            contentText={t('Are you sure you want to clear the conversation? It cannot be undone.')}
+            content={t('Are you sure you want to clear the conversation? It cannot be undone.')}
             onConfirm={() => {
               if (generating) {
                 for (const id in chatSseControllers) {
diff --git a/frontend/src/pages/Completion.tsx b/frontend/src/pages/Completion.tsx
index a6484f2..29af57d 100644
--- a/frontend/src/pages/Completion.tsx
+++ b/frontend/src/pages/Completion.tsx
@@ -284,7 +284,7 @@ const CompletionPanel: FC = observer(() => {
             onSubmit(commonStore.completionSubmittedPrompt);
           }} />
           <DialogButton className="grow" text={t('Reset')} title={t('Reset')}
-            contentText={t('Are you sure you want to reset this page? It cannot be undone.')}
+            content={t('Are you sure you want to reset this page? It cannot be undone.')}
             onConfirm={() => {
               setPreset(defaultPresets.find((preset) => preset.name === name)!);
             }} />
diff --git a/frontend/src/pages/Composition.tsx b/frontend/src/pages/Composition.tsx
index 2981c17..4dfa3b9 100644
--- a/frontend/src/pages/Composition.tsx
+++ b/frontend/src/pages/Composition.tsx
@@ -387,7 +387,7 @@ const CompositionPanel: FC = observer(() => {
               onSubmit(commonStore.compositionSubmittedPrompt);
             }} />
             <DialogButton className="grow" text={t('Reset')} title={t('Reset')}
-              contentText={t('Are you sure you want to reset this page? It cannot be undone.')}
+              content={t('Are you sure you want to reset this page? It cannot be undone.')}
               onConfirm={() => {
                 const isABC = commonStore.getCurrentModelConfig().modelParameters.modelName.toLowerCase().includes('abc');
                 const defaultPrompt = isABC ? defaultCompositionABCPrompt : defaultCompositionPrompt;
diff --git a/frontend/src/pages/Train.tsx b/frontend/src/pages/Train.tsx
index b27871e..ccb6cea 100644
--- a/frontend/src/pages/Train.tsx
+++ b/frontend/src/pages/Train.tsx
@@ -391,7 +391,7 @@ const LoraFinetune: FC = observer(() => {
                     setDataParams({ dataPath: data.value });
                   }} />
                 <DialogButton text={t('Help')} title={t('Help')} markdown
-                  contentText={t('The data path should be a directory or a file in jsonl format (more formats will be supported in the future).\n\n' +
+                  content={t('The data path should be a directory or a file in jsonl format (more formats will be supported in the future).\n\n' +
                     'When you provide a directory path, all the txt files within that directory will be automatically converted into training data. ' +
                     'This is commonly used for large-scale training in writing, code generation, or knowledge bases.\n\n' +
                     'The jsonl format file can be referenced at https://github.com/josStorer/RWKV-Runner/blob/master/finetune/data/sample.jsonl.\n' +