improve DialogButton

This commit is contained in:
josc146 2024-03-26 21:25:13 +08:00
parent 08bc342fd6
commit 3cef51144f
6 changed files with 31 additions and 18 deletions

View File

@ -16,20 +16,28 @@ import { LazyImportComponent } from './LazyImportComponent';
const MarkdownRender = React.lazy(() => import('./MarkdownRender')); const MarkdownRender = React.lazy(() => import('./MarkdownRender'));
export const DialogButton: FC<{ export const DialogButton: FC<{
text?: string | null text?: string | null,
icon?: ReactElement, icon?: ReactElement,
tooltip?: string | null, tooltip?: string | null,
className?: string, className?: string,
title: string, title: string,
contentText: string, content?: string | ReactElement | null
markdown?: boolean, markdown?: boolean,
onConfirm?: () => void, onConfirm?: () => void,
size?: 'small' | 'medium' | 'large', size?: 'small' | 'medium' | 'large',
shape?: 'rounded' | 'circular' | 'square', shape?: 'rounded' | 'circular' | 'square',
appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent', appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent',
cancelButton?: boolean,
confirmButton?: boolean,
cancelButtonText?: string,
confirmButtonText?: string,
}> = ({ }> = ({
text, icon, tooltip, className, title, contentText, markdown, text, icon, tooltip, className, title, content, markdown,
onConfirm, size, shape, appearance onConfirm, size, shape, appearance,
cancelButton = true,
confirmButton = true,
cancelButtonText = 'Cancel',
confirmButtonText = 'Confirm'
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -48,19 +56,24 @@ export const DialogButton: FC<{
{ {
markdown ? markdown ?
<LazyImportComponent lazyChildren={MarkdownRender}> <LazyImportComponent lazyChildren={MarkdownRender}>
{contentText} {content}
</LazyImportComponent> : </LazyImportComponent> :
contentText content
} }
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<DialogTrigger disableButtonEnhancement> {cancelButton && (
<Button appearance="secondary">{t('Cancel')}</Button> <DialogTrigger disableButtonEnhancement>
</DialogTrigger> <Button appearance="secondary">{t(cancelButtonText)}</Button>
<DialogTrigger disableButtonEnhancement> </DialogTrigger>
<Button appearance="primary" onClick={onConfirm}>{t('Confirm')} )}
</Button> {confirmButton && (
</DialogTrigger> <DialogTrigger disableButtonEnhancement>
<Button appearance="primary" onClick={onConfirm}>
{t(confirmButtonText)}
</Button>
</DialogTrigger>
)}
</DialogActions> </DialogActions>
</DialogBody> </DialogBody>
</DialogSurface> </DialogSurface>

View File

@ -9,7 +9,7 @@ import { defaultModelConfigs, defaultModelConfigsMac } from '../pages/defaultCon
export const ResetConfigsButton: FC<{ afterConfirm?: () => void }> = ({ afterConfirm }) => { export const ResetConfigsButton: FC<{ afterConfirm?: () => void }> = ({ afterConfirm }) => {
const { t } = useTranslation(); const { t } = useTranslation();
return <DialogButton icon={<ArrowReset20Regular />} tooltip={t('Reset All Configs')} title={t('Reset All Configs')} 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={() => { onConfirm={() => {
commonStore.setModelConfigs(commonStore.platform !== 'darwin' ? defaultModelConfigs : defaultModelConfigsMac, false); commonStore.setModelConfigs(commonStore.platform !== 'darwin' ? defaultModelConfigs : defaultModelConfigsMac, false);
commonStore.setCurrentConfigIndex(0, true); commonStore.setCurrentConfigIndex(0, true);

View File

@ -651,7 +651,7 @@ const ChatPanel: FC = observer(() => {
<DialogButton tooltip={t('Clear')} <DialogButton tooltip={t('Clear')}
icon={<Delete28Regular />} icon={<Delete28Regular />}
size={mq ? 'large' : 'small'} shape="circular" appearance="subtle" title={t('Clear')} 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={() => { onConfirm={() => {
if (generating) { if (generating) {
for (const id in chatSseControllers) { for (const id in chatSseControllers) {

View File

@ -284,7 +284,7 @@ const CompletionPanel: FC = observer(() => {
onSubmit(commonStore.completionSubmittedPrompt); onSubmit(commonStore.completionSubmittedPrompt);
}} /> }} />
<DialogButton className="grow" text={t('Reset')} title={t('Reset')} <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={() => { onConfirm={() => {
setPreset(defaultPresets.find((preset) => preset.name === name)!); setPreset(defaultPresets.find((preset) => preset.name === name)!);
}} /> }} />

View File

@ -387,7 +387,7 @@ const CompositionPanel: FC = observer(() => {
onSubmit(commonStore.compositionSubmittedPrompt); onSubmit(commonStore.compositionSubmittedPrompt);
}} /> }} />
<DialogButton className="grow" text={t('Reset')} title={t('Reset')} <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={() => { onConfirm={() => {
const isABC = commonStore.getCurrentModelConfig().modelParameters.modelName.toLowerCase().includes('abc'); const isABC = commonStore.getCurrentModelConfig().modelParameters.modelName.toLowerCase().includes('abc');
const defaultPrompt = isABC ? defaultCompositionABCPrompt : defaultCompositionPrompt; const defaultPrompt = isABC ? defaultCompositionABCPrompt : defaultCompositionPrompt;

View File

@ -391,7 +391,7 @@ const LoraFinetune: FC = observer(() => {
setDataParams({ dataPath: data.value }); setDataParams({ dataPath: data.value });
}} /> }} />
<DialogButton text={t('Help')} title={t('Help')} markdown <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. ' + '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' + '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' + 'The jsonl format file can be referenced at https://github.com/josStorer/RWKV-Runner/blob/master/finetune/data/sample.jsonl.\n' +