improve presets interaction

This commit is contained in:
josc146 2023-12-08 15:36:53 +08:00
parent eea53a6e9e
commit 60693d6a29

View File

@ -52,7 +52,10 @@ const defaultPreset: Preset = {
prompt: '', prompt: '',
stop: '', stop: '',
injectStart: '', injectStart: '',
injectEnd: '' injectEnd: '',
presystem: true,
userName: '',
assistantName: ''
}; };
const MessagesEditor = lazy(() => import('./MessagesEditor')); const MessagesEditor = lazy(() => import('./MessagesEditor'));
@ -80,7 +83,9 @@ const setActivePreset = (preset: Preset) => {
//} //}
}; };
const PresetCardFrame: FC<PropsWithChildren & { onClick?: () => void }> = (props) => { const PresetCardFrame: FC<PropsWithChildren & {
onClick?: React.MouseEventHandler<HTMLButtonElement>
}> = (props) => {
return <Button return <Button
className="flex flex-col gap-1 w-32 h-56 break-all" className="flex flex-col gap-1 w-32 h-56 break-all"
style={{ minWidth: 0, borderRadius: '0.75rem', justifyContent: 'unset' }} style={{ minWidth: 0, borderRadius: '0.75rem', justifyContent: 'unset' }}
@ -103,7 +108,10 @@ const PresetCard: FC<{
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
return <PresetCardFrame onClick={onClick}> return <PresetCardFrame onClick={(e) => {
if (onClick && e.currentTarget.contains(e.target as Node))
onClick();
}}>
<img src={absPathAsset(avatarImg)} className="rounded-xl select-none ml-auto mr-auto h-28" /> <img src={absPathAsset(avatarImg)} className="rounded-xl select-none ml-auto mr-auto h-28" />
<Text size={400}>{name}</Text> <Text size={400}>{name}</Text>
<Text size={200} style={{ <Text size={200} style={{
@ -116,7 +124,8 @@ const PresetCard: FC<{
{editable ? {editable ?
<ChatPresetEditor presetIndex={presetIndex} triggerButton={ <ChatPresetEditor presetIndex={presetIndex} triggerButton={
<ToolTipButton size="small" appearance="transparent" desc={t('Edit')} icon={<Edit20Regular />} <ToolTipButton size="small" appearance="transparent" desc={t('Edit')} icon={<Edit20Regular />}
onClick={() => { onClick={(e) => {
e.stopPropagation();
commonStore.setEditingPreset({ ...commonStore.presets[presetIndex] }); commonStore.setEditingPreset({ ...commonStore.presets[presetIndex] });
}} /> }} />
} /> } />