知识库功能开发
jiangxucong
3 days ago
parent
327749afbd
commit
8004ee2e79
@ -0,0 +1,16 @@
|
|||||||
|
import { Skeleton } from 'antd';
|
||||||
|
import { memo } from 'react';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
const SkeletonLoading = memo(() => (
|
||||||
|
<Flexbox padding={12}>
|
||||||
|
<Skeleton active paragraph={{ width: '70%' }} title={false} />
|
||||||
|
<Skeleton active paragraph={{ width: '40%' }} title={false} />
|
||||||
|
<Skeleton active paragraph={{ width: '80%' }} title={false} />
|
||||||
|
<Skeleton active paragraph={{ width: '30%' }} title={false} />
|
||||||
|
<Skeleton active paragraph={{ width: '50%' }} title={false} />
|
||||||
|
<Skeleton active paragraph={{ width: '70%' }} title={false} />
|
||||||
|
</Flexbox>
|
||||||
|
));
|
||||||
|
|
||||||
|
export default SkeletonLoading;
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import { Input } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { MAX_GREETING_LENGTH } from '@/constants/common';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
const [greeting, updateAgentConfig] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentGreeting(s),
|
||||||
|
s.updateAgentConfig,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Input.TextArea
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
value={greeting}
|
||||||
|
autoSize={{ minRows: 2, maxRows: 4 }}
|
||||||
|
placeholder={t('role.greetTip')}
|
||||||
|
showCount
|
||||||
|
maxLength={MAX_GREETING_LENGTH}
|
||||||
|
onChange={(e) => {
|
||||||
|
updateAgentConfig({ greeting: e.target.value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
import { Upload } from 'antd';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import NextImage from 'next/image';
|
||||||
|
import React, { CSSProperties, memo, useCallback } from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
AVATAR_COMPRESS_SIZE,
|
||||||
|
AVATAR_IMAGE_SIZE,
|
||||||
|
COVER_COMPRESS_SIZE,
|
||||||
|
DEFAULT_AGENT_AVATAR_URL,
|
||||||
|
} from '@/constants/common';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
import { createUploadImageHandler } from '@/utils/common';
|
||||||
|
import { imageToBase64 } from '@/utils/imageToBase64';
|
||||||
|
|
||||||
|
const useStyle = createStyles(
|
||||||
|
({ css, token }) => css`
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition:
|
||||||
|
scale 400ms ${token.motionEaseOut},
|
||||||
|
box-shadow 100ms ${token.motionEaseOut};
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 0 3px ${token.colorText};
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
scale: 0.8;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
);
|
||||||
|
|
||||||
|
interface AvatarWithUploadProps {
|
||||||
|
id?: string;
|
||||||
|
size?: number;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<AvatarWithUploadProps>(({ size = AVATAR_IMAGE_SIZE, style, id }) => {
|
||||||
|
const { styles } = useStyle();
|
||||||
|
const [avatar, updateAgentMeta] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentMeta(s)?.avatar,
|
||||||
|
s.updateAgentMeta,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const handleUploadAvatar = useCallback(
|
||||||
|
createUploadImageHandler((avatar) => {
|
||||||
|
const img = new Image();
|
||||||
|
img.src = avatar;
|
||||||
|
img.addEventListener('load', () => {
|
||||||
|
const avatar = imageToBase64({ img, size: AVATAR_COMPRESS_SIZE });
|
||||||
|
const cover = imageToBase64({ img, size: COVER_COMPRESS_SIZE });
|
||||||
|
updateAgentMeta({ avatar, cover });
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={styles}
|
||||||
|
id={id}
|
||||||
|
style={{ maxHeight: AVATAR_IMAGE_SIZE, maxWidth: AVATAR_IMAGE_SIZE, ...style }}
|
||||||
|
>
|
||||||
|
<Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
|
||||||
|
<NextImage
|
||||||
|
alt={avatar ? 'userAvatar' : 'LobeVidol'}
|
||||||
|
height={size}
|
||||||
|
src={!!avatar ? avatar : DEFAULT_AGENT_AVATAR_URL}
|
||||||
|
unoptimized
|
||||||
|
width={size}
|
||||||
|
/>
|
||||||
|
</Upload>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import { Input } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { MAX_README_LENGTH } from '@/constants/common';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
const [readme, updateAgentMeta] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentMeta(s)?.readme,
|
||||||
|
s.updateAgentMeta,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Input.TextArea
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
value={readme}
|
||||||
|
autoSize={{ minRows: 10, maxRows: 10 }}
|
||||||
|
placeholder={t('role.roleReadmeTip')}
|
||||||
|
showCount
|
||||||
|
maxLength={MAX_README_LENGTH}
|
||||||
|
onChange={(e) => {
|
||||||
|
updateAgentMeta({ readme: e.target.value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import { Select } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
import { RoleCategoryEnum } from '@/types/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const [category, updateAgentMeta] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentMeta(s)?.category,
|
||||||
|
s.updateAgentMeta,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
options={[
|
||||||
|
{ label: t('category.animal'), value: RoleCategoryEnum.ANIMAL },
|
||||||
|
{ label: t('category.anime'), value: RoleCategoryEnum.ANIME },
|
||||||
|
{ label: t('category.book'), value: RoleCategoryEnum.BOOK },
|
||||||
|
{ label: t('category.game'), value: RoleCategoryEnum.GAME },
|
||||||
|
{ label: t('category.history'), value: RoleCategoryEnum.HISTORY },
|
||||||
|
{ label: t('category.movie'), value: RoleCategoryEnum.MOVIE },
|
||||||
|
{ label: t('category.realistic'), value: RoleCategoryEnum.REALISTIC },
|
||||||
|
{ label: t('category.vroid'), value: RoleCategoryEnum.VROID },
|
||||||
|
{ label: t('category.vtuber'), value: RoleCategoryEnum.VTUBER },
|
||||||
|
]}
|
||||||
|
value={category}
|
||||||
|
defaultActiveFirstOption={true}
|
||||||
|
onChange={(value) => {
|
||||||
|
updateAgentMeta({ category: value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { Input } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { MAX_DESCRIPTION_LENGTH } from '@/constants/common';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
const [description, updateAgentMeta] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentMeta(s)?.description,
|
||||||
|
s.updateAgentMeta,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
value={description}
|
||||||
|
placeholder={t('role.roleDescriptionTip')}
|
||||||
|
maxLength={MAX_DESCRIPTION_LENGTH}
|
||||||
|
showCount
|
||||||
|
onChange={(e) => {
|
||||||
|
updateAgentMeta({ description: e.target.value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import { Select } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
import { GenderEnum } from '@/types/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const [gender, updateAgentMeta] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentMeta(s)?.gender,
|
||||||
|
s.updateAgentMeta,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
options={[
|
||||||
|
{ label: t('gender.male'), value: GenderEnum.MALE },
|
||||||
|
{ label: t('gender.female'), value: GenderEnum.FEMALE },
|
||||||
|
]}
|
||||||
|
value={gender}
|
||||||
|
defaultActiveFirstOption={true}
|
||||||
|
onChange={(value) => {
|
||||||
|
updateAgentMeta({ gender: value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { Input } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { MAX_NAME_LENGTH } from '@/constants/common';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
const [name, updateAgentMeta] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentMeta(s)?.name,
|
||||||
|
s.updateAgentMeta,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
value={name}
|
||||||
|
placeholder={t('role.roleNameTip')}
|
||||||
|
maxLength={MAX_NAME_LENGTH}
|
||||||
|
showCount
|
||||||
|
onChange={(e) => {
|
||||||
|
updateAgentMeta({ name: e.target.value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import { Form, FormProps } from '@lobehub/ui';
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { FORM_STYLE } from '@/constants/token';
|
||||||
|
|
||||||
|
import Greeting from './Greeting';
|
||||||
|
import PreviewWithUpload from './PreviewWithUpload';
|
||||||
|
import ReadMe from './ReadMe';
|
||||||
|
import RoleCategory from './RoleCategory';
|
||||||
|
import RoleDescription from './RoleDescription';
|
||||||
|
import RoleGender from './RoleGender';
|
||||||
|
import RoleName from './RoleName';
|
||||||
|
|
||||||
|
const Info = () => {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
const basic: FormProps['items'] = [
|
||||||
|
{
|
||||||
|
label: t('info.avatarLabel'),
|
||||||
|
desc: t('info.avatarDescription'),
|
||||||
|
name: 'avatar',
|
||||||
|
children: <PreviewWithUpload />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('info.nameLabel'),
|
||||||
|
desc: t('info.nameDescription'),
|
||||||
|
name: 'name',
|
||||||
|
children: <RoleName />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('info.descLabel'),
|
||||||
|
desc: t('info.descDescription'),
|
||||||
|
name: 'description',
|
||||||
|
children: <RoleDescription />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('info.greetLabel'),
|
||||||
|
desc: t('info.greetDescription'),
|
||||||
|
name: 'greeting',
|
||||||
|
children: <Greeting />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('info.genderLabel'),
|
||||||
|
desc: t('info.genderDescription'),
|
||||||
|
name: 'gender',
|
||||||
|
children: <RoleGender />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('info.categoryLabel'),
|
||||||
|
desc: t('info.categoryDescription'),
|
||||||
|
name: 'category',
|
||||||
|
children: <RoleCategory />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('info.readmeLabel'),
|
||||||
|
desc: t('info.readmeDescription'),
|
||||||
|
name: 'readme',
|
||||||
|
children: <ReadMe />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return <Form form={form} items={basic} itemsType={'flat'} variant={'block'} {...FORM_STYLE} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Info;
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { SliderWithInput } from '@lobehub/ui';
|
||||||
|
import React, { memo } from 'react';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
const FrequencyPenalty = memo(() => {
|
||||||
|
const [frequency_penalty, updateAgentConfig] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentParams(s)?.frequency_penalty,
|
||||||
|
s.updateAgentConfig,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SliderWithInput
|
||||||
|
max={2}
|
||||||
|
min={-2}
|
||||||
|
step={0.1}
|
||||||
|
value={frequency_penalty}
|
||||||
|
onChange={(value) => updateAgentConfig({ params: { frequency_penalty: value } })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default FrequencyPenalty;
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
import { Select, SelectProps } from 'antd';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import isEqual from 'fast-deep-equal';
|
||||||
|
import { memo, useMemo } from 'react';
|
||||||
|
|
||||||
|
import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
import { useSettingStore } from '@/store/setting';
|
||||||
|
import { modelProviderSelectors } from '@/store/setting/selectors';
|
||||||
|
import { ModelProviderCard } from '@/types/llm';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css, prefixCls }) => ({
|
||||||
|
select: css`
|
||||||
|
&.${prefixCls}-select-dropdown .${prefixCls}-select-item-option-grouped {
|
||||||
|
padding-inline-start: 12px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface ModelOption {
|
||||||
|
label: any;
|
||||||
|
provider: string;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ModelSelectProps {
|
||||||
|
onChange?: (props: { model: string; provider: string }) => void;
|
||||||
|
showAbility?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ModelSelect = memo<ModelSelectProps>(({ showAbility = true }) => {
|
||||||
|
const enabledList = useSettingStore(
|
||||||
|
modelProviderSelectors.modelProviderListForModelSelect,
|
||||||
|
isEqual,
|
||||||
|
);
|
||||||
|
|
||||||
|
const [model, provider, updateAgentConfig] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentModel(s),
|
||||||
|
agentSelectors.currentAgentProvider(s),
|
||||||
|
s.updateAgentConfig,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const { styles } = useStyles();
|
||||||
|
|
||||||
|
const options = useMemo<SelectProps['options']>(() => {
|
||||||
|
const getChatModels = (provider: ModelProviderCard) =>
|
||||||
|
provider.chatModels.map((model) => ({
|
||||||
|
label: <ModelItemRender {...model} showInfoTag={showAbility} />,
|
||||||
|
provider: provider.id,
|
||||||
|
value: `${provider.id}/${model.id}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (enabledList.length === 1) {
|
||||||
|
const provider = enabledList[0];
|
||||||
|
|
||||||
|
return getChatModels(provider);
|
||||||
|
}
|
||||||
|
|
||||||
|
return enabledList.map((provider) => ({
|
||||||
|
label: <ProviderItemRender name={provider.name} provider={provider.id} />,
|
||||||
|
options: getChatModels(provider),
|
||||||
|
}));
|
||||||
|
}, [enabledList]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
onChange={(value, option) => {
|
||||||
|
const model = value.split('/').slice(1).join('/');
|
||||||
|
updateAgentConfig({ model, provider: (option as unknown as ModelOption).provider });
|
||||||
|
}}
|
||||||
|
options={options}
|
||||||
|
popupClassName={styles.select}
|
||||||
|
popupMatchSelectWidth={false}
|
||||||
|
value={`${provider}/${model}`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default ModelSelect;
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { SliderWithInput } from '@lobehub/ui';
|
||||||
|
import React, { memo } from 'react';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
const PresencePenalty = memo(() => {
|
||||||
|
const [presence_penalty, updateAgentConfig] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentParams(s)?.presence_penalty,
|
||||||
|
s.updateAgentConfig,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SliderWithInput
|
||||||
|
max={2}
|
||||||
|
min={-2}
|
||||||
|
step={0.1}
|
||||||
|
value={presence_penalty}
|
||||||
|
onChange={(value) => updateAgentConfig({ params: { presence_penalty: value } })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default PresencePenalty;
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { SliderWithInput } from '@lobehub/ui';
|
||||||
|
import React, { memo } from 'react';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
const Temperature = memo(() => {
|
||||||
|
const [temperature, updateAgentConfig] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentParams(s)?.temperature,
|
||||||
|
s.updateAgentConfig,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SliderWithInput
|
||||||
|
max={1}
|
||||||
|
min={0}
|
||||||
|
step={0.1}
|
||||||
|
value={temperature}
|
||||||
|
onChange={(value) => updateAgentConfig({ params: { temperature: value } })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Temperature;
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { SliderWithInput } from '@lobehub/ui';
|
||||||
|
import React, { memo } from 'react';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
const TopP = memo(() => {
|
||||||
|
const [top_p, updateAgentConfig] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentParams(s)?.top_p,
|
||||||
|
s.updateAgentConfig,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SliderWithInput
|
||||||
|
max={1}
|
||||||
|
min={0}
|
||||||
|
step={0.1}
|
||||||
|
value={top_p}
|
||||||
|
onChange={(value) => updateAgentConfig({ params: { top_p: value } })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default TopP;
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Form, FormProps } from '@lobehub/ui';
|
||||||
|
import React, { memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import FrequencyPenalty from '@/app/role/RoleEdit/LangModel/FrequencyPenalty';
|
||||||
|
import ModelSelect from '@/app/role/RoleEdit/LangModel/ModelSelect';
|
||||||
|
import PresencePenalty from '@/app/role/RoleEdit/LangModel/PresencePenalty';
|
||||||
|
import Temperature from '@/app/role/RoleEdit/LangModel/Temperature';
|
||||||
|
import TopP from '@/app/role/RoleEdit/LangModel/TopP';
|
||||||
|
import { FORM_STYLE } from '@/constants/token';
|
||||||
|
|
||||||
|
const LangModel = memo(() => {
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
const model: FormProps['items'] = [
|
||||||
|
{
|
||||||
|
children: <ModelSelect />,
|
||||||
|
desc: t('llm.modelDescription'),
|
||||||
|
label: t('llm.modelLabel'),
|
||||||
|
name: 'model',
|
||||||
|
tag: 'model',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
children: <Temperature />,
|
||||||
|
desc: t('llm.temperatureDescription'),
|
||||||
|
label: t('llm.temperatureLabel'),
|
||||||
|
name: ['params', 'temperature'],
|
||||||
|
tag: 'temperature',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
children: <TopP />,
|
||||||
|
desc: t('llm.topPDescription'),
|
||||||
|
label: t('llm.topPLabel'),
|
||||||
|
name: ['params', 'top_p'],
|
||||||
|
tag: 'top_p',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
children: <PresencePenalty />,
|
||||||
|
desc: t('llm.presencePenaltyDescription'),
|
||||||
|
label: t('llm.presencePenaltyLabel'),
|
||||||
|
name: ['params', 'presence_penalty'],
|
||||||
|
tag: 'presence_penalty',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
children: <FrequencyPenalty />,
|
||||||
|
desc: t('llm.frequencyPenaltyDescription'),
|
||||||
|
label: t('llm.frequencyPenaltyLabel'),
|
||||||
|
name: ['params', 'frequency_penalty'],
|
||||||
|
tag: 'frequency_penalty',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return <Form items={model} itemsType={'flat'} variant={'block'} {...FORM_STYLE} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default LangModel;
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import { Input } from 'antd';
|
||||||
|
import React, { CSSProperties, memo, useRef } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { MAX_SYSTEM_ROLE_LENGTH } from '@/constants/common';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const inputRef = useRef(null);
|
||||||
|
const [systemRole, updateAgentConfig] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentItem(s)?.systemRole,
|
||||||
|
s.updateAgentConfig,
|
||||||
|
]);
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
return (
|
||||||
|
<Input.TextArea
|
||||||
|
ref={inputRef}
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
value={systemRole}
|
||||||
|
autoSize={{ minRows: 16 }}
|
||||||
|
placeholder={t('role.inputRoleSetting')}
|
||||||
|
showCount
|
||||||
|
maxLength={MAX_SYSTEM_ROLE_LENGTH}
|
||||||
|
onChange={(e) => {
|
||||||
|
updateAgentConfig({ systemRole: e.target.value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
import { Card, Cards } from '@lobehub/ui/mdx';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const [name, updateAgentConfig] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentItem(s)?.meta.name,
|
||||||
|
s.updateAgentConfig,
|
||||||
|
]);
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
return (
|
||||||
|
<Cards style={{ marginTop: 24, ...style }} className={className}>
|
||||||
|
<Card
|
||||||
|
image="https://r2.vidol.chat/common/default.png"
|
||||||
|
title={t('systemRole.defaultLabel', { ns: 'role' })}
|
||||||
|
onClick={() => {
|
||||||
|
updateAgentConfig({
|
||||||
|
systemRole: t('systemRole.default', { ns: 'role', char: name }),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
image="https://r2.vidol.chat/common/genshin.png"
|
||||||
|
title={t('systemRole.geniusLabel', { ns: 'role' })}
|
||||||
|
onClick={() => {
|
||||||
|
updateAgentConfig({
|
||||||
|
systemRole: t('systemRole.genius', { ns: 'role', char: name }),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
image="https://r2.vidol.chat/common/zzz.png"
|
||||||
|
title={t('systemRole.zzzLabel', { ns: 'role' })}
|
||||||
|
onClick={() => {
|
||||||
|
updateAgentConfig({
|
||||||
|
systemRole: t('systemRole.zzz', { ns: 'role', char: name }),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Cards>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import SystemRole from './SystemRole';
|
||||||
|
import Templates from './Templates';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css }) => ({
|
||||||
|
container: css`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 16px;
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const Info = () => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classNames(styles.container)}>
|
||||||
|
<SystemRole />
|
||||||
|
<Templates />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Info;
|
||||||
@ -0,0 +1,167 @@
|
|||||||
|
import { ActionIcon, Form, FormItem, Modal } from '@lobehub/ui';
|
||||||
|
import { VRMExpressionPresetName } from '@pixiv/three-vrm';
|
||||||
|
import { Input, Select } from 'antd';
|
||||||
|
import { Edit2Icon, Plus } from 'lucide-react';
|
||||||
|
import React, { memo, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { INPUT_WIDTH_MD, INPUT_WIDTH_SM } from '@/constants/token';
|
||||||
|
import { MAX_TOUCH_ACTION_TEXT_LENGTH } from '@/constants/touch';
|
||||||
|
import { MotionPresetName, motionPresetMap } from '@/libs/emoteController/motionPresetMap';
|
||||||
|
import { useAgentStore } from '@/store/agent';
|
||||||
|
import { TouchAction, TouchAreaEnum } from '@/types/touch';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
index?: number;
|
||||||
|
isEdit?: boolean;
|
||||||
|
touchAction?: TouchAction;
|
||||||
|
touchArea: TouchAreaEnum;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo((props: Props) => {
|
||||||
|
const { touchArea, index, touchAction, isEdit = true } = props;
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
const [updateTouchAction, createTouchAction] = useAgentStore((s) => [
|
||||||
|
s.updateTouchAction,
|
||||||
|
s.createTouchAction,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const showModal = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOk = () => {
|
||||||
|
form.validateFields().then((values) => {
|
||||||
|
setOpen(false);
|
||||||
|
if (isEdit) {
|
||||||
|
updateTouchAction(touchArea, index!, values);
|
||||||
|
} else {
|
||||||
|
createTouchAction(touchArea, values);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ActionIcon
|
||||||
|
icon={isEdit ? Edit2Icon : Plus}
|
||||||
|
title={isEdit ? t('actions.edit', { ns: 'chat' }) : t('actions.add', { ns: 'chat' })}
|
||||||
|
onClick={showModal}
|
||||||
|
/>
|
||||||
|
<Modal
|
||||||
|
allowFullscreen
|
||||||
|
onCancel={handleCancel}
|
||||||
|
onOk={handleOk}
|
||||||
|
open={open}
|
||||||
|
width={800}
|
||||||
|
destroyOnClose
|
||||||
|
title={isEdit ? t('touch.editAction') : t('touch.addAction')}
|
||||||
|
okText={t('confirm', { ns: 'common' })}
|
||||||
|
cancelText={t('cancel', { ns: 'common' })}
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
layout="horizontal"
|
||||||
|
requiredMark
|
||||||
|
initialValues={
|
||||||
|
isEdit
|
||||||
|
? touchAction
|
||||||
|
: {
|
||||||
|
expression: VRMExpressionPresetName.Neutral,
|
||||||
|
motion: MotionPresetName.FemaleHappy,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
form={form}
|
||||||
|
preserve={false}
|
||||||
|
>
|
||||||
|
<FormItem
|
||||||
|
label={t('info.textLabel')}
|
||||||
|
desc={t('info.textDescription')}
|
||||||
|
name={'text'}
|
||||||
|
rules={[{ required: true, message: t('touch.inputDIYText') }]}
|
||||||
|
>
|
||||||
|
<Input.TextArea
|
||||||
|
placeholder={t('touch.inputActionText')}
|
||||||
|
maxLength={MAX_TOUCH_ACTION_TEXT_LENGTH}
|
||||||
|
showCount
|
||||||
|
autoSize
|
||||||
|
style={{ width: INPUT_WIDTH_MD }}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
label={t('info.emotionLabel')}
|
||||||
|
desc={t('info.emotionDescription')}
|
||||||
|
divider
|
||||||
|
rules={[{ required: true, message: t('touch.inputActionEmotion') }]}
|
||||||
|
name="expression"
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
label: t('touch.expression.natural'),
|
||||||
|
value: VRMExpressionPresetName.Neutral,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.expression.happy'),
|
||||||
|
value: VRMExpressionPresetName.Happy,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.expression.angry'),
|
||||||
|
value: VRMExpressionPresetName.Angry,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.expression.sad'),
|
||||||
|
value: VRMExpressionPresetName.Sad,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.expression.relaxed'),
|
||||||
|
value: VRMExpressionPresetName.Relaxed,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.expression.surprised'),
|
||||||
|
value: VRMExpressionPresetName.Surprised,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.expression.blink'),
|
||||||
|
value: VRMExpressionPresetName.Blink,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.expression.blinkLeft'),
|
||||||
|
value: VRMExpressionPresetName.BlinkLeft,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.expression.blinkRight'),
|
||||||
|
value: VRMExpressionPresetName.BlinkRight,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
style={{ width: INPUT_WIDTH_SM }}
|
||||||
|
defaultActiveFirstOption={true}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
label={t('info.motionLabel')}
|
||||||
|
desc={t('info.motionDescription')}
|
||||||
|
divider
|
||||||
|
rules={[{ required: true, message: t('touch.inputActionEmotion') }]}
|
||||||
|
name="motion"
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
options={Object.entries(motionPresetMap).map(([key, value]) => ({
|
||||||
|
label: t(`${value.name}`),
|
||||||
|
value: key,
|
||||||
|
}))}
|
||||||
|
style={{ width: INPUT_WIDTH_SM }}
|
||||||
|
defaultActiveFirstOption={true}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import { ActionIcon } from '@lobehub/ui';
|
||||||
|
import { Popconfirm } from 'antd';
|
||||||
|
import { XIcon } from 'lucide-react';
|
||||||
|
import { memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { useAgentStore } from '@/store/agent';
|
||||||
|
import { TouchAreaEnum } from '@/types/touch';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
index: number;
|
||||||
|
touchArea: TouchAreaEnum;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo((props: Props) => {
|
||||||
|
const { touchArea, index } = props;
|
||||||
|
const { t } = useTranslation('common');
|
||||||
|
const [removeTouchAction] = useAgentStore((s) => [s.removeTouchAction]);
|
||||||
|
return (
|
||||||
|
<Popconfirm
|
||||||
|
title={t('confirmDel')}
|
||||||
|
key="delete"
|
||||||
|
okText={t('confirm')}
|
||||||
|
cancelText={t('cancel')}
|
||||||
|
onConfirm={() => {
|
||||||
|
removeTouchAction(touchArea, index);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ActionIcon icon={XIcon} title={t('delete')} />
|
||||||
|
</Popconfirm>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import { Switch } from 'antd';
|
||||||
|
import React, { memo } from 'react';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
export default memo(() => {
|
||||||
|
const [enable, updateAgentConfig] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentItem(s)?.touch?.enable,
|
||||||
|
s.updateAgentConfig,
|
||||||
|
]);
|
||||||
|
return (
|
||||||
|
<Switch
|
||||||
|
value={enable}
|
||||||
|
// style={{ width: 48 }}
|
||||||
|
onChange={(value) => {
|
||||||
|
updateAgentConfig({ touch: { enable: value } });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
import { ActionIcon } from '@lobehub/ui';
|
||||||
|
import { message } from 'antd';
|
||||||
|
import { isEqual } from 'lodash-es';
|
||||||
|
import { Loader2, PlayIcon } from 'lucide-react';
|
||||||
|
import { memo, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { speakCharacter } from '@/libs/messages/speakCharacter';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
import { useGlobalStore } from '@/store/global';
|
||||||
|
import { TouchAction } from '@/types/touch';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
touchAction: TouchAction;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo((props: Props) => {
|
||||||
|
const { touchAction } = props;
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const viewer = useGlobalStore((s) => s.viewer);
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
const currentAgentTTS = useAgentStore((s) => agentSelectors.currentAgentTTS(s), isEqual);
|
||||||
|
|
||||||
|
if (!touchAction) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ActionIcon
|
||||||
|
icon={loading ? Loader2 : PlayIcon}
|
||||||
|
spin={loading}
|
||||||
|
disable={loading}
|
||||||
|
title={t('play', { ns: 'common' })}
|
||||||
|
key="play"
|
||||||
|
onClick={() => {
|
||||||
|
speakCharacter(
|
||||||
|
{
|
||||||
|
expression: touchAction.expression,
|
||||||
|
tts: {
|
||||||
|
...currentAgentTTS,
|
||||||
|
message: touchAction.text,
|
||||||
|
},
|
||||||
|
motion: touchAction.motion,
|
||||||
|
},
|
||||||
|
viewer,
|
||||||
|
{
|
||||||
|
onStart: () => {
|
||||||
|
setLoading(true);
|
||||||
|
},
|
||||||
|
onComplete: () => {
|
||||||
|
setLoading(false);
|
||||||
|
},
|
||||||
|
onError: () => {
|
||||||
|
message.error(t('ttsTransformFailed', { ns: 'error' }));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
import { Empty } from 'antd';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { get } from 'lodash-es';
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import ListItem from '@/components/ListItem';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
import { TouchAction, TouchAreaEnum } from '@/types/touch';
|
||||||
|
|
||||||
|
import Header from '../components/Header';
|
||||||
|
import AddOrEdit from './Actions/AddOrEdit';
|
||||||
|
import Delete from './Actions/Delete';
|
||||||
|
import Play from './Actions/Play';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css, token }) => ({
|
||||||
|
list: css`
|
||||||
|
width: 100%;
|
||||||
|
`,
|
||||||
|
|
||||||
|
listItem: css`
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
margin-block: 2px;
|
||||||
|
|
||||||
|
font-size: ${token.fontSize}px;
|
||||||
|
|
||||||
|
background-color: ${token.colorBgContainer};
|
||||||
|
border-radius: ${token.borderRadius}px;
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface AreaListProps {
|
||||||
|
areaOptions?: { label: string; value: TouchAreaEnum }[];
|
||||||
|
className?: string;
|
||||||
|
currentTouchArea: TouchAreaEnum;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AreaList = (props: AreaListProps) => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const { currentTouchArea, style, className, areaOptions = [] } = props;
|
||||||
|
const [currentAgentTouch] = useAgentStore((s) => [agentSelectors.currentAgentTouch(s)]);
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
const items = get(currentAgentTouch, currentTouchArea)
|
||||||
|
? (get(currentAgentTouch, currentTouchArea) as TouchAction[])
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const touchArea = areaOptions.find((item) => item.value === currentTouchArea)?.label;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flexbox flex={1} style={style} className={className}>
|
||||||
|
<Header
|
||||||
|
title={t('touch.touchActionList', { touchArea })}
|
||||||
|
extra={<AddOrEdit isEdit={false} touchArea={currentTouchArea} />}
|
||||||
|
/>
|
||||||
|
{items.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<ListItem
|
||||||
|
key={`${item.text}_${index}`}
|
||||||
|
className={classNames(styles.listItem)}
|
||||||
|
showAction={true}
|
||||||
|
avatar={<Play key={`${currentTouchArea}_play_${index}`} touchAction={item} />}
|
||||||
|
title={item.text}
|
||||||
|
active={false}
|
||||||
|
actions={[
|
||||||
|
<AddOrEdit
|
||||||
|
key={`${currentTouchArea}_edit_${index}`}
|
||||||
|
index={index}
|
||||||
|
touchArea={currentTouchArea}
|
||||||
|
touchAction={item}
|
||||||
|
isEdit={true}
|
||||||
|
/>,
|
||||||
|
<Delete
|
||||||
|
key={`${currentTouchArea}_delete_${index}`}
|
||||||
|
index={index}
|
||||||
|
touchArea={currentTouchArea}
|
||||||
|
/>,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{items.length === 0 && (
|
||||||
|
<Empty description={t('touch.noTouchActions')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||||
|
)}
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AreaList;
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { MousePointerClick } from 'lucide-react';
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import ListItem from '@/components/ListItem';
|
||||||
|
import { TouchAreaEnum } from '@/types/touch';
|
||||||
|
|
||||||
|
import Enabled from '../ActionList/Actions/Enabled';
|
||||||
|
import Header from '../components/Header';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css, token, responsive }) => ({
|
||||||
|
listItem: css`
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
margin-block: 2px;
|
||||||
|
border-radius: ${token.borderRadius}px;
|
||||||
|
`,
|
||||||
|
container: css`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 180px;
|
||||||
|
${responsive.lg} {
|
||||||
|
flex-flow: row wrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface IndexProps {
|
||||||
|
areaOptions: { label: string; value: TouchAreaEnum }[];
|
||||||
|
currentTouchArea: TouchAreaEnum;
|
||||||
|
setCurrentTouchArea: (area: TouchAreaEnum) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Index = (props: IndexProps) => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const { currentTouchArea, setCurrentTouchArea, areaOptions = [] } = props;
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flexbox className={styles.container}>
|
||||||
|
<Header title={t('touch.customEnable')} extra={<Enabled />} />
|
||||||
|
{areaOptions.map((item) => (
|
||||||
|
<ListItem
|
||||||
|
avatar={<MousePointerClick />}
|
||||||
|
className={classNames(styles.listItem)}
|
||||||
|
active={item.value === currentTouchArea}
|
||||||
|
key={item.value}
|
||||||
|
title={item.label}
|
||||||
|
onClick={() => setCurrentTouchArea(item.value)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Index;
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
import { InboxOutlined } from '@ant-design/icons';
|
||||||
|
import { Upload } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import AgentViewer from '@/features/AgentViewer';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
import { useGlobalStore } from '@/store/global';
|
||||||
|
import { getModelPathByAgentId } from '@/utils/file';
|
||||||
|
import { cacheStorage } from '@/utils/storage';
|
||||||
|
|
||||||
|
import { useStyles } from './style';
|
||||||
|
|
||||||
|
interface ViewerWithUploadProps {
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ViewerWithUpload = memo<ViewerWithUploadProps>(({ style }) => {
|
||||||
|
const viewer = useGlobalStore((s) => s.viewer);
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
const { styles } = useStyles();
|
||||||
|
|
||||||
|
const [currentAgentId, currentAgent3DModel, updateAgentConfig] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentId(s),
|
||||||
|
agentSelectors.currentAgent3DModel(s),
|
||||||
|
s.updateAgentConfig,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const handleUploadAvatar = (file: any) => {
|
||||||
|
if (!currentAgentId) return;
|
||||||
|
const blob = new Blob([file], { type: 'application/octet-stream' });
|
||||||
|
const modelKey = getModelPathByAgentId(currentAgentId!);
|
||||||
|
|
||||||
|
cacheStorage.setItem(modelKey, blob).then(() => {
|
||||||
|
updateAgentConfig({ meta: { model: modelKey } });
|
||||||
|
const vrmUrl = window.URL.createObjectURL(blob as Blob);
|
||||||
|
viewer.loadVrm(vrmUrl);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return currentAgent3DModel && currentAgentId ? (
|
||||||
|
<AgentViewer agentId={currentAgentId} interactive={false} toolbar={false} />
|
||||||
|
) : (
|
||||||
|
<Upload
|
||||||
|
beforeUpload={handleUploadAvatar}
|
||||||
|
itemRender={() => void 0}
|
||||||
|
accept={'.vrm'}
|
||||||
|
maxCount={1}
|
||||||
|
style={style}
|
||||||
|
openFileDialogOnClick={!currentAgent3DModel}
|
||||||
|
>
|
||||||
|
<Flexbox
|
||||||
|
className={styles.guide}
|
||||||
|
align="center"
|
||||||
|
justify={'center'}
|
||||||
|
width={'100%'}
|
||||||
|
height={'100%'}
|
||||||
|
>
|
||||||
|
<InboxOutlined className={styles.icon} />
|
||||||
|
<p className={styles.info}>{t('uploadTip', { ns: 'common' })}</p>
|
||||||
|
<p className={styles.extra}>{t('upload.support')}</p>
|
||||||
|
</Flexbox>
|
||||||
|
</Upload>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default ViewerWithUpload;
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
|
||||||
|
import { ROLE_VIEWER_WIDTH } from '@/constants/common';
|
||||||
|
|
||||||
|
export const useStyles = createStyles(({ css, token }) => ({
|
||||||
|
guide: css`
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
width: ${ROLE_VIEWER_WIDTH}px;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 480px;
|
||||||
|
|
||||||
|
border: 1px dashed ${token.colorBorderSecondary};
|
||||||
|
`,
|
||||||
|
icon: css`
|
||||||
|
font-size: 48px;
|
||||||
|
color: ${token.geekblue};
|
||||||
|
`,
|
||||||
|
info: css``,
|
||||||
|
extra: css`
|
||||||
|
font-size: 12px;
|
||||||
|
color: ${token.colorTextDescription};
|
||||||
|
`,
|
||||||
|
}));
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import React from 'react';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
interface HeaderProps {
|
||||||
|
extra?: React.ReactNode;
|
||||||
|
title: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css, token }) => ({
|
||||||
|
title: css`
|
||||||
|
font-size: ${token.fontSize}px;
|
||||||
|
color: ${token.colorPrimary};
|
||||||
|
`,
|
||||||
|
|
||||||
|
header: css`
|
||||||
|
align-items: center;
|
||||||
|
height: 48px;
|
||||||
|
font-size: ${token.fontSize}px;
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default (props: HeaderProps) => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const { title, extra } = props;
|
||||||
|
return (
|
||||||
|
<Flexbox justify="space-between" horizontal className={styles.header}>
|
||||||
|
<div className={styles.title}>{title}</div>
|
||||||
|
{extra}
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import React, { memo, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import { ROLE_VIEWER_WIDTH } from '@/constants/common';
|
||||||
|
import { TouchAreaEnum } from '@/types/touch';
|
||||||
|
|
||||||
|
import ActionList from './ActionList';
|
||||||
|
import SideBar from './SideBar';
|
||||||
|
import ViewerWithUpload from './ViewerWithUpload';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css, token, responsive }) => ({
|
||||||
|
container: css`
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
min-height: 480px;
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
background-color: rgba(255, 255, 255, 2%);
|
||||||
|
border-radius: ${token.borderRadius}px;
|
||||||
|
|
||||||
|
${responsive.lg} {
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
model: css`
|
||||||
|
width: ${ROLE_VIEWER_WIDTH}px;
|
||||||
|
height: 100%;
|
||||||
|
${responsive.lg} {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface TouchProps {
|
||||||
|
className?: string;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Touch = (props: TouchProps) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const [currentTouchArea, setCurrentTouchArea] = useState<TouchAreaEnum>(TouchAreaEnum.Head);
|
||||||
|
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
const TOUCH_AREA_OPTIONS = [
|
||||||
|
{
|
||||||
|
label: t('touch.area.head'),
|
||||||
|
value: TouchAreaEnum.Head,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.area.arm'),
|
||||||
|
value: TouchAreaEnum.Arm,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.area.leg'),
|
||||||
|
value: TouchAreaEnum.Leg,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.area.chest'),
|
||||||
|
value: TouchAreaEnum.Chest,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.area.belly'),
|
||||||
|
value: TouchAreaEnum.Belly,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('touch.area.buttocks'),
|
||||||
|
value: TouchAreaEnum.Buttocks,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flexbox className={classNames(className, styles.container)} style={style} horizontal gap={12}>
|
||||||
|
<SideBar
|
||||||
|
currentTouchArea={currentTouchArea}
|
||||||
|
setCurrentTouchArea={setCurrentTouchArea}
|
||||||
|
areaOptions={TOUCH_AREA_OPTIONS}
|
||||||
|
/>
|
||||||
|
<ActionList currentTouchArea={currentTouchArea} areaOptions={TOUCH_AREA_OPTIONS} />
|
||||||
|
<Flexbox className={styles.model}>
|
||||||
|
<ViewerWithUpload />
|
||||||
|
</Flexbox>
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default memo(Touch);
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import { Select } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
import { TTS_ENGINE } from '@/types/tts';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const [engine, updateAgentTTS] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentTTS(s)?.engine,
|
||||||
|
s.updateAgentTTS,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
value={engine}
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
label: 'Edge',
|
||||||
|
value: 'edge',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
onChange={(value) => {
|
||||||
|
updateAgentTTS({ engine: value as TTS_ENGINE });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { Select } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
|
||||||
|
import { supportedLocales } from '@/constants/tts';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const [locale, updateAgentTTS] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentTTS(s)?.locale,
|
||||||
|
s.updateAgentTTS,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
value={locale}
|
||||||
|
options={supportedLocales}
|
||||||
|
onChange={(value) => {
|
||||||
|
updateAgentTTS({ locale: value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import { InputNumber, Slider } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import { MAX_TTS_PITCH, MIN_TTS_PITCH, TTS_PITCH_STEP } from '@/constants/tts';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const [pitch, updateAgentTTS] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentTTS(s)?.pitch,
|
||||||
|
s.updateAgentTTS,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flexbox className={className} style={style} flex={1} horizontal gap={8}>
|
||||||
|
<Slider
|
||||||
|
value={pitch}
|
||||||
|
max={MAX_TTS_PITCH}
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
min={MIN_TTS_PITCH}
|
||||||
|
step={TTS_PITCH_STEP}
|
||||||
|
onChange={(value) => {
|
||||||
|
updateAgentTTS({ pitch: value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<InputNumber
|
||||||
|
min={MIN_TTS_PITCH}
|
||||||
|
max={MAX_TTS_PITCH}
|
||||||
|
step={TTS_PITCH_STEP}
|
||||||
|
style={{ width: 80 }}
|
||||||
|
value={pitch}
|
||||||
|
onChange={(value) => {
|
||||||
|
updateAgentTTS({ pitch: value === null ? undefined : value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
import { PlayCircleOutlined } from '@ant-design/icons';
|
||||||
|
import { useRequest } from 'ahooks';
|
||||||
|
import { Button, message } from 'antd';
|
||||||
|
import React, { CSSProperties, memo, useRef } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { supportedLocales } from '@/constants/tts';
|
||||||
|
import { speechApi } from '@/services/tts';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const ref = useRef<HTMLAudioElement>(null);
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
const tts = useAgentStore((s) => agentSelectors.currentAgentTTS(s));
|
||||||
|
const sample = supportedLocales.find((item) => item.value === tts?.locale)?.sample;
|
||||||
|
|
||||||
|
const { loading, run: speek } = useRequest(speechApi, {
|
||||||
|
manual: true,
|
||||||
|
onError: (err) => {
|
||||||
|
message.error(err.message);
|
||||||
|
if (ref.current) {
|
||||||
|
ref.current.pause();
|
||||||
|
ref.current.currentTime = 0;
|
||||||
|
ref.current.src = '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSuccess: (res) => {
|
||||||
|
message.success(t('tts.transformSuccess'));
|
||||||
|
const adUrl = URL.createObjectURL(new Blob([res]));
|
||||||
|
if (ref.current) {
|
||||||
|
ref.current.src = adUrl;
|
||||||
|
ref.current.play();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
htmlType="button"
|
||||||
|
type={'primary'}
|
||||||
|
style={style}
|
||||||
|
className={className}
|
||||||
|
icon={<PlayCircleOutlined />}
|
||||||
|
loading={loading}
|
||||||
|
onClick={() => {
|
||||||
|
if (!tts?.locale) {
|
||||||
|
message.error(t('tts.selectLanguage'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!tts?.voice) {
|
||||||
|
message.error(t('tts.selectVoice'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (sample) {
|
||||||
|
speek({ ...tts, message: sample });
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('tts.audition')}
|
||||||
|
</Button>
|
||||||
|
<audio ref={ref} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import { InputNumber, Slider } from 'antd';
|
||||||
|
import React, { CSSProperties, memo } from 'react';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import { MAX_TTS_SPEED, MIN_TTS_SPEED, TTS_SPEED_STEP } from '@/constants/tts';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const [speed, updateAgentTTS] = useAgentStore((s) => [
|
||||||
|
agentSelectors.currentAgentTTS(s)?.speed,
|
||||||
|
s.updateAgentTTS,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flexbox className={className} style={style} flex={1} horizontal gap={8}>
|
||||||
|
<Slider
|
||||||
|
value={speed}
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
min={MIN_TTS_SPEED}
|
||||||
|
max={MAX_TTS_SPEED}
|
||||||
|
step={TTS_SPEED_STEP}
|
||||||
|
onChange={(value) => {
|
||||||
|
updateAgentTTS({ speed: value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<InputNumber
|
||||||
|
min={MIN_TTS_SPEED}
|
||||||
|
max={MAX_TTS_SPEED}
|
||||||
|
step={TTS_SPEED_STEP}
|
||||||
|
style={{ width: 80 }}
|
||||||
|
value={speed}
|
||||||
|
onChange={(value) => {
|
||||||
|
updateAgentTTS({ speed: value === null ? undefined : value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
import { useRequest } from 'ahooks';
|
||||||
|
import { Select } from 'antd';
|
||||||
|
import { isEqual } from 'lodash-es';
|
||||||
|
import React, { CSSProperties, memo, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import { voiceListApi } from '@/services/tts';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
import { Voice } from '@/types/tts';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo<Props>((props) => {
|
||||||
|
const { style, className } = props;
|
||||||
|
const [voices, setVoices] = useState<Voice[]>([]);
|
||||||
|
|
||||||
|
const [voice, engine, locale, updateAgentTTS] = useAgentStore(
|
||||||
|
(s) => [
|
||||||
|
agentSelectors.currentAgentTTS(s)?.voice,
|
||||||
|
agentSelectors.currentAgentTTS(s)?.engine,
|
||||||
|
agentSelectors.currentAgentTTS(s)?.locale,
|
||||||
|
s.updateAgentTTS,
|
||||||
|
],
|
||||||
|
isEqual,
|
||||||
|
);
|
||||||
|
|
||||||
|
const { loading: voiceLoading } = useRequest(
|
||||||
|
() => {
|
||||||
|
if (!engine) {
|
||||||
|
return Promise.resolve({ data: [] });
|
||||||
|
}
|
||||||
|
return voiceListApi(engine);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onSuccess: (res) => {
|
||||||
|
setVoices(res.data);
|
||||||
|
},
|
||||||
|
refreshDeps: [engine],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!locale) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const voice = voices.find((voice) => voice.locale === locale);
|
||||||
|
if (voice) {
|
||||||
|
updateAgentTTS({ voice: voice.ShortName });
|
||||||
|
}
|
||||||
|
}, [locale, engine]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
value={voice}
|
||||||
|
disabled={voiceLoading}
|
||||||
|
loading={voiceLoading}
|
||||||
|
options={voices
|
||||||
|
.filter((voice) => voice.locale === locale)
|
||||||
|
.map((item) => ({
|
||||||
|
label: `${item.DisplayName}-${item.LocalName}`,
|
||||||
|
value: item.ShortName,
|
||||||
|
}))}
|
||||||
|
onChange={(value) => {
|
||||||
|
updateAgentTTS({ voice: value });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
import { Form, FormProps } from '@lobehub/ui';
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { FORM_STYLE } from '@/constants/token';
|
||||||
|
|
||||||
|
import TTSEngine from './TTSEngine';
|
||||||
|
import TTSLocale from './TTSLocale';
|
||||||
|
import TTSPitch from './TTSPitch';
|
||||||
|
import TTSPlay from './TTSPlay';
|
||||||
|
import TTSSpeed from './TTSSpeed';
|
||||||
|
import TTSVoice from './TTSVoice';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
const voice: FormProps['items'] = [
|
||||||
|
{
|
||||||
|
label: t('tts.engineLabel'),
|
||||||
|
desc: t('tts.engineDescription'),
|
||||||
|
name: 'engine',
|
||||||
|
children: <TTSEngine />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('tts.localeLabel'),
|
||||||
|
desc: t('tts.localeDescription'),
|
||||||
|
name: 'locale',
|
||||||
|
children: <TTSLocale />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('tts.voiceLabel'),
|
||||||
|
desc: t('tts.voiceDescription'),
|
||||||
|
name: 'voice',
|
||||||
|
children: <TTSVoice />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('tts.speedLabel'),
|
||||||
|
desc: t('tts.speedDescription'),
|
||||||
|
name: 'speed',
|
||||||
|
children: <TTSSpeed />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('tts.pitchLabel'),
|
||||||
|
desc: t('tts.pitchDescription'),
|
||||||
|
name: 'pitch',
|
||||||
|
children: <TTSPitch />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('tts.audition'),
|
||||||
|
desc: t('tts.auditionDescription'),
|
||||||
|
children: <TTSPlay />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return <Form items={voice} itemsType={'flat'} variant={'block'} {...FORM_STYLE} />;
|
||||||
|
};
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { ActionIcon, Icon } from '@lobehub/ui';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
import { Book } from 'lucide-react';
|
||||||
|
import { memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/token';
|
||||||
|
|
||||||
|
const handleOpenDocs = () => {
|
||||||
|
window.open('https://docs.vidol.chat/role-manual/quickstart/introduction', '_blank');
|
||||||
|
};
|
||||||
|
|
||||||
|
const RoleBookButton = memo<{ modal?: boolean }>(({ modal }) => {
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
return modal ? (
|
||||||
|
<Button icon={<Icon icon={Book} />} onClick={handleOpenDocs}>
|
||||||
|
{t('roleBook')}
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<ActionIcon
|
||||||
|
icon={Book}
|
||||||
|
onClick={handleOpenDocs}
|
||||||
|
size={DESKTOP_HEADER_ICON_SIZE}
|
||||||
|
title={t('roleBook')}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default RoleBookButton;
|
||||||
@ -0,0 +1,176 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Alert, Icon, Modal, type ModalProps } from '@lobehub/ui';
|
||||||
|
import { Button, Divider, Input, Popover, Progress, Space, Typography, message } from 'antd';
|
||||||
|
import { useTheme } from 'antd-style';
|
||||||
|
import isEqual from 'fast-deep-equal';
|
||||||
|
import { kebabCase } from 'lodash-es';
|
||||||
|
import { Dices } from 'lucide-react';
|
||||||
|
import qs from 'query-string';
|
||||||
|
import React, { memo, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import AgentCard from '@/components/agent/AgentCard';
|
||||||
|
import SystemRole from '@/components/agent/SystemRole';
|
||||||
|
import { AGENTS_INDEX_GITHUB_ISSUE } from '@/constants/url';
|
||||||
|
import { useUploadAgent } from '@/hooks/useUploadAgent';
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
import { configSelectors, useSettingStore } from '@/store/setting';
|
||||||
|
import { Agent } from '@/types/agent';
|
||||||
|
|
||||||
|
const SubmitAgentModal = memo<ModalProps>(({ open, onCancel }) => {
|
||||||
|
const [agentId, setAgentId] = useState('');
|
||||||
|
const theme = useTheme();
|
||||||
|
const currentAgent: Agent | undefined = useAgentStore(
|
||||||
|
(s) => agentSelectors.currentAgentItem(s),
|
||||||
|
isEqual,
|
||||||
|
);
|
||||||
|
const language = useSettingStore((s) => configSelectors.currentLanguage(s));
|
||||||
|
|
||||||
|
const meta = currentAgent?.meta;
|
||||||
|
const { t } = useTranslation(['role', 'common', 'error']);
|
||||||
|
|
||||||
|
const { uploading, uploadAgentData, percent } = useUploadAgent();
|
||||||
|
|
||||||
|
const isFormPass = Boolean(
|
||||||
|
currentAgent?.greeting &&
|
||||||
|
currentAgent?.systemRole &&
|
||||||
|
meta?.name &&
|
||||||
|
meta?.description &&
|
||||||
|
meta?.avatar &&
|
||||||
|
meta?.model,
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!currentAgent || !meta || !agentId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { avatarUrl, coverUrl, modelUrl } = await uploadAgentData(agentId, meta);
|
||||||
|
if (!avatarUrl || !coverUrl || !modelUrl) {
|
||||||
|
message.error(t('fileUploadError', { ns: 'error' }));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = [
|
||||||
|
'### agentId',
|
||||||
|
agentId,
|
||||||
|
'### avatar',
|
||||||
|
avatarUrl,
|
||||||
|
'### cover',
|
||||||
|
coverUrl,
|
||||||
|
'### systemRole',
|
||||||
|
currentAgent.systemRole,
|
||||||
|
'### greeting',
|
||||||
|
currentAgent.greeting,
|
||||||
|
'### modelUrl',
|
||||||
|
modelUrl,
|
||||||
|
'### name',
|
||||||
|
meta.name,
|
||||||
|
'### description',
|
||||||
|
meta.description,
|
||||||
|
'### category',
|
||||||
|
meta.category,
|
||||||
|
'### readme',
|
||||||
|
meta.readme,
|
||||||
|
'### gender',
|
||||||
|
meta.gender,
|
||||||
|
'### tts',
|
||||||
|
JSON.stringify(currentAgent.tts),
|
||||||
|
'### touch',
|
||||||
|
JSON.stringify(currentAgent.touch),
|
||||||
|
'### model',
|
||||||
|
currentAgent.model,
|
||||||
|
'### params',
|
||||||
|
JSON.stringify(currentAgent.params),
|
||||||
|
'### locale',
|
||||||
|
language,
|
||||||
|
].join('\n\n');
|
||||||
|
|
||||||
|
const url = qs.stringifyUrl({
|
||||||
|
query: { body, labels: '🤖 Agent PR', title: `[Agent] ${meta.name}` },
|
||||||
|
url: AGENTS_INDEX_GITHUB_ISSUE,
|
||||||
|
});
|
||||||
|
|
||||||
|
window.open(url, '_blank');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
allowFullscreen
|
||||||
|
footer={
|
||||||
|
<Popover
|
||||||
|
open={uploading}
|
||||||
|
title={
|
||||||
|
<Flexbox>
|
||||||
|
<Typography.Text type={'secondary'}>{t('submit.uploadingTip')}</Typography.Text>
|
||||||
|
<Space>
|
||||||
|
<Progress steps={30} percent={percent.cover} size="small" />
|
||||||
|
<Typography.Text style={{ fontSize: 12 }}>
|
||||||
|
{t('submit.uploadingCover')}
|
||||||
|
</Typography.Text>
|
||||||
|
</Space>
|
||||||
|
<Space>
|
||||||
|
<Progress steps={30} percent={percent.avatar} size="small" />
|
||||||
|
<Typography.Text style={{ fontSize: 12 }}>
|
||||||
|
{t('submit.uploadingAvatar')}
|
||||||
|
</Typography.Text>
|
||||||
|
</Space>
|
||||||
|
<Space>
|
||||||
|
<Progress steps={30} percent={percent.model} size="small" />
|
||||||
|
<Typography.Text style={{ fontSize: 12 }}>
|
||||||
|
{t('submit.uploadingModel')}
|
||||||
|
</Typography.Text>
|
||||||
|
</Space>
|
||||||
|
</Flexbox>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
block
|
||||||
|
disabled={!isFormPass || !agentId}
|
||||||
|
onClick={handleSubmit}
|
||||||
|
size={'large'}
|
||||||
|
type={'primary'}
|
||||||
|
loading={uploading}
|
||||||
|
>
|
||||||
|
{t('submit.submitAssistant')}
|
||||||
|
</Button>
|
||||||
|
</Popover>
|
||||||
|
}
|
||||||
|
onCancel={onCancel}
|
||||||
|
open={open}
|
||||||
|
title={t('shareToMarket')}
|
||||||
|
>
|
||||||
|
<Flexbox gap={16}>
|
||||||
|
{!isFormPass && <Alert message={t('submit.submitWarning')} showIcon type={'warning'} />}
|
||||||
|
<AgentCard agent={currentAgent} />
|
||||||
|
<Divider style={{ margin: '8px 0' }} />
|
||||||
|
<SystemRole systemRole={currentAgent?.systemRole} />
|
||||||
|
<Divider style={{ margin: '8px 0' }} />
|
||||||
|
<strong>
|
||||||
|
<span style={{ color: theme.colorError, marginRight: 4 }}>*</span>
|
||||||
|
agentId {t('submit.assistantId')}
|
||||||
|
</strong>
|
||||||
|
<Space.Compact style={{ width: '100%' }}>
|
||||||
|
<Input
|
||||||
|
onChange={(e) => setAgentId(e.target.value)}
|
||||||
|
placeholder={t('submit.assistantIdTip')}
|
||||||
|
value={agentId}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<Icon icon={Dices} />}
|
||||||
|
title={t('random', { ns: 'common' })}
|
||||||
|
onClick={() => {
|
||||||
|
const randomId = Math.random().toString(36).slice(7);
|
||||||
|
setAgentId(kebabCase(randomId));
|
||||||
|
}}
|
||||||
|
></Button>
|
||||||
|
</Space.Compact>
|
||||||
|
</Flexbox>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default SubmitAgentModal;
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { ActionIcon, Icon } from '@lobehub/ui';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
import { Share2 } from 'lucide-react';
|
||||||
|
import { memo, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/token';
|
||||||
|
|
||||||
|
import SubmitAgentModal from './SubmitAgentModal';
|
||||||
|
|
||||||
|
const SubmitAgentButton = memo<{ modal?: boolean }>(({ modal }) => {
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
const shareToMarket = t('shareToMarket');
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{modal ? (
|
||||||
|
<Button block icon={<Icon icon={Share2} />} onClick={() => setIsModalOpen(true)}>
|
||||||
|
{shareToMarket}
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<ActionIcon
|
||||||
|
icon={Share2}
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
size={DESKTOP_HEADER_ICON_SIZE}
|
||||||
|
title={shareToMarket}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<SubmitAgentModal onCancel={() => setIsModalOpen(false)} open={isModalOpen} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default SubmitAgentButton;
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
|
||||||
|
export const useStyles = createStyles(({ css, token, prefixCls }) => ({
|
||||||
|
author: css`
|
||||||
|
font-size: 12px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
avatar: css`
|
||||||
|
flex: none;
|
||||||
|
`,
|
||||||
|
container: css`
|
||||||
|
position: relative;
|
||||||
|
padding: 16px 16px 24px;
|
||||||
|
border-bottom: 1px solid ${token.colorBorderSecondary};
|
||||||
|
`,
|
||||||
|
date: css`
|
||||||
|
font-size: 12px;
|
||||||
|
color: ${token.colorTextDescription};
|
||||||
|
`,
|
||||||
|
desc: css`
|
||||||
|
color: ${token.colorTextDescription};
|
||||||
|
text-align: center;
|
||||||
|
`,
|
||||||
|
loading: css`
|
||||||
|
.${prefixCls}-skeleton-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
nav: css`
|
||||||
|
padding-top: 4px;
|
||||||
|
|
||||||
|
.${prefixCls}-tabs-tab {
|
||||||
|
margin: 4px !important;
|
||||||
|
|
||||||
|
+ .${prefixCls}-tabs-tab {
|
||||||
|
margin: 4px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
title: css`
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
`,
|
||||||
|
}));
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import { ActionIcon } from '@lobehub/ui';
|
||||||
|
import { ChevronsLeft, List } from 'lucide-react';
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/token';
|
||||||
|
import { useGlobalStore } from '@/store/global';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const [showRoleList, toggleRoleList] = useGlobalStore((s) => [s.showRoleList, s.toggleRoleList]);
|
||||||
|
const { t } = useTranslation('chat');
|
||||||
|
return (
|
||||||
|
<ActionIcon
|
||||||
|
icon={showRoleList ? ChevronsLeft : List}
|
||||||
|
onClick={() => toggleRoleList()}
|
||||||
|
title={t('roleList')}
|
||||||
|
size={DESKTOP_HEADER_ICON_SIZE}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { TabsNav } from '@lobehub/ui';
|
||||||
|
import { useResponsive } from 'ahooks';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import Info from './Info';
|
||||||
|
import LangModel from './LangModel';
|
||||||
|
import Role from './Role';
|
||||||
|
import Shell from './Shell';
|
||||||
|
import Voice from './Voice';
|
||||||
|
import RoleBookButton from './actions/RoleBook';
|
||||||
|
import SubmitAgentButton from './actions/SubmitAgentButton';
|
||||||
|
import ToogleRoleList from './actions/ToogleRoleList';
|
||||||
|
import { useStyles } from './style';
|
||||||
|
|
||||||
|
interface RolePanelProps {
|
||||||
|
className?: string;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
const RolePanel = (props: RolePanelProps) => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const { md = true } = useResponsive();
|
||||||
|
const { className, style } = props;
|
||||||
|
const [tab, setTab] = useState('info');
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flexbox flex={1} gap={12} className={classNames(styles.container, className)} style={style}>
|
||||||
|
<TabsNav
|
||||||
|
activeKey={tab}
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
key: 'info',
|
||||||
|
label: t('nav.info'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'role',
|
||||||
|
label: t('nav.role'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'voice',
|
||||||
|
label: t('nav.voice'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'shell',
|
||||||
|
label: t('nav.shell'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'llm',
|
||||||
|
label: t('nav.llm'),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
tabBarExtraContent={{
|
||||||
|
left: <ToogleRoleList />,
|
||||||
|
right: (
|
||||||
|
<Flexbox horizontal gap={8}>
|
||||||
|
<RoleBookButton modal={md} />
|
||||||
|
<SubmitAgentButton modal={md} />
|
||||||
|
</Flexbox>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
onChange={(key) => {
|
||||||
|
setTab(key);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{tab === 'info' ? <Info /> : null}
|
||||||
|
{tab === 'role' ? <Role /> : null}
|
||||||
|
{tab === 'voice' ? <Voice /> : null}
|
||||||
|
{tab === 'shell' ? <Shell /> : null}
|
||||||
|
{tab === 'llm' ? <LangModel /> : null}
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RolePanel;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
|
||||||
|
export const useStyles = createStyles(({ css }) => ({
|
||||||
|
container: css`
|
||||||
|
width: 100%;
|
||||||
|
`,
|
||||||
|
}));
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { FormInstance } from 'antd/es/form/hooks/useForm';
|
||||||
|
import { isEqual } from 'lodash-es';
|
||||||
|
import { useLayoutEffect } from 'react';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
export const useSyncSettings = (form: FormInstance) => {
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
const currentAgent = agentSelectors.currentAgentItem(useAgentStore.getState());
|
||||||
|
form.setFieldsValue(currentAgent);
|
||||||
|
|
||||||
|
// sync with later updated settings
|
||||||
|
const unsubscribe = useAgentStore.subscribe(
|
||||||
|
(s) => agentSelectors.currentAgentItem(s),
|
||||||
|
(agent) => {
|
||||||
|
form.setFieldsValue(agent);
|
||||||
|
},
|
||||||
|
{ equalityFn: isEqual },
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
unsubscribe();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
};
|
||||||
@ -0,0 +1,128 @@
|
|||||||
|
import { ActionIcon, Modal } from '@lobehub/ui';
|
||||||
|
import { Avatar, Button, message } from 'antd';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import { MessageSquarePlus } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import ListItem from '@/components/ListItem';
|
||||||
|
import { useAgentStore } from '@/store/agent';
|
||||||
|
import { GenderEnum } from '@/types/agent';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css, token }) => ({
|
||||||
|
genderList: css`
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 24px;
|
||||||
|
`,
|
||||||
|
genderCard: css`
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
border: 1px solid ${token.colorBorder};
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: ${token.colorPrimary};
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
border-color: ${token.colorPrimary};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
createButton: css`
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 24px;
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default function CreateRole() {
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const [selectedGender, setSelectedGender] = useState<GenderEnum | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const router = useRouter();
|
||||||
|
const createNewAgent = useAgentStore((s) => s.createNewAgent);
|
||||||
|
|
||||||
|
const handleCreateRole = async () => {
|
||||||
|
if (!selectedGender) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
await createNewAgent(selectedGender);
|
||||||
|
router.push(`/role`);
|
||||||
|
setIsModalOpen(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('create role failed:', error);
|
||||||
|
message.error(t('role.createRoleFailed'));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const genderOptions = [
|
||||||
|
{
|
||||||
|
key: GenderEnum.MALE,
|
||||||
|
label: t('agent.male'),
|
||||||
|
icon: 'https://oss.vidol.chat/docs/2024/12/8fc3717dd8f190f26cf204789d54b297.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: GenderEnum.FEMALE,
|
||||||
|
label: t('agent.female'),
|
||||||
|
icon: 'https://oss.vidol.chat/docs/2024/12/6c45a6c800590acdb782ab905939fa04.png',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ActionIcon
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
icon={MessageSquarePlus}
|
||||||
|
size="large"
|
||||||
|
title={t('role.create')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
allowFullscreen
|
||||||
|
height={360}
|
||||||
|
title={t('role.selectGender')}
|
||||||
|
open={isModalOpen}
|
||||||
|
footer={
|
||||||
|
<Button
|
||||||
|
className={styles.createButton}
|
||||||
|
type="primary"
|
||||||
|
disabled={!selectedGender || loading}
|
||||||
|
onClick={handleCreateRole}
|
||||||
|
loading={loading}
|
||||||
|
>
|
||||||
|
{t('role.create')}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
width={480}
|
||||||
|
onCancel={() => !loading && setIsModalOpen(false)}
|
||||||
|
closable={!loading}
|
||||||
|
maskClosable={!loading}
|
||||||
|
>
|
||||||
|
<div className={styles.genderList}>
|
||||||
|
{genderOptions.map((option) => (
|
||||||
|
<ListItem
|
||||||
|
key={option.key}
|
||||||
|
avatar={<Avatar src={option.icon} size={120} />}
|
||||||
|
className={`${styles.genderCard} ${selectedGender === option.key ? 'selected' : ''}`}
|
||||||
|
onClick={() => setSelectedGender(option.key as GenderEnum)}
|
||||||
|
active={selectedGender === option.key}
|
||||||
|
title={option.label}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Typography } from 'antd';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import { memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import CreateRole from './CreateRole';
|
||||||
|
|
||||||
|
export const useStyles = createStyles(({ css, token }) => ({
|
||||||
|
logo: css`
|
||||||
|
color: ${token.colorText};
|
||||||
|
fill: ${token.colorText};
|
||||||
|
`,
|
||||||
|
top: css`
|
||||||
|
position: sticky;
|
||||||
|
inset-block-start: 0;
|
||||||
|
height: 64px;
|
||||||
|
line-height: 64px;
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const RoleHeader = memo(() => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flexbox className={styles.top} gap={16} padding={12}>
|
||||||
|
<Flexbox distribution={'space-between'} horizontal>
|
||||||
|
<Flexbox align={'center'} gap={4} horizontal>
|
||||||
|
<Typography.Title level={4} style={{ margin: 0 }}>
|
||||||
|
{t('role.myRole')}
|
||||||
|
</Typography.Title>
|
||||||
|
</Flexbox>
|
||||||
|
<CreateRole />
|
||||||
|
</Flexbox>
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default RoleHeader;
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import { Space, Tag } from 'antd';
|
||||||
|
import { memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { LOBE_VIDOL_DEFAULT_AGENT_ID } from '@/constants/agent';
|
||||||
|
import { useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
import ListItem from '../../ListItem';
|
||||||
|
|
||||||
|
const V = memo(() => {
|
||||||
|
const { t } = useTranslation('common');
|
||||||
|
const [activeId, activateAgent, defaultAgent] = useAgentStore((s) => [
|
||||||
|
s.currentIdentifier,
|
||||||
|
s.activateAgent,
|
||||||
|
s.defaultAgent,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ListItem
|
||||||
|
onClick={() => {
|
||||||
|
activateAgent(LOBE_VIDOL_DEFAULT_AGENT_ID);
|
||||||
|
}}
|
||||||
|
active={activeId === LOBE_VIDOL_DEFAULT_AGENT_ID}
|
||||||
|
avatar={defaultAgent.meta.avatar}
|
||||||
|
title={
|
||||||
|
<Space align={'center'}>
|
||||||
|
{defaultAgent.meta.name}
|
||||||
|
<Tag color="geekblue">{t('defaultAssistant')}</Tag>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
description={defaultAgent.meta.description}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default V;
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
import { ActionIcon } from '@lobehub/ui';
|
||||||
|
import { App, Dropdown, MenuProps } from 'antd';
|
||||||
|
import { MessageCircle, MoreVertical, Trash2 } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { useAgentStore } from '@/store/agent';
|
||||||
|
import { useSessionStore } from '@/store/session';
|
||||||
|
|
||||||
|
interface ActionsProps {
|
||||||
|
id: string;
|
||||||
|
setOpen: (open: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default (props: ActionsProps) => {
|
||||||
|
const { id, setOpen } = props;
|
||||||
|
const { modal } = App.useApp();
|
||||||
|
const router = useRouter();
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
const [removeLocalAgent] = useAgentStore((s) => [s.removeLocalAgent]);
|
||||||
|
const currentAgent = useAgentStore((s) => s.getAgentById(id));
|
||||||
|
const [createSession, removeSessionByAgentId] = useSessionStore((s) => [
|
||||||
|
s.createSession,
|
||||||
|
s.removeSessionByAgentId,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const items: MenuProps['items'] = [
|
||||||
|
{
|
||||||
|
icon: <MessageCircle />,
|
||||||
|
label: t('startChat'),
|
||||||
|
key: 'chat',
|
||||||
|
onClick: ({ domEvent }) => {
|
||||||
|
domEvent.stopPropagation();
|
||||||
|
if (!currentAgent) return;
|
||||||
|
createSession(currentAgent);
|
||||||
|
router.push('/chat');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
danger: true,
|
||||||
|
icon: <Trash2 />,
|
||||||
|
key: 'delete',
|
||||||
|
label: t('delRole'),
|
||||||
|
onClick: ({ domEvent }) => {
|
||||||
|
domEvent.stopPropagation();
|
||||||
|
modal.confirm({
|
||||||
|
centered: true,
|
||||||
|
okButtonProps: { danger: true },
|
||||||
|
async onOk() {
|
||||||
|
await removeLocalAgent(id);
|
||||||
|
removeSessionByAgentId(id);
|
||||||
|
},
|
||||||
|
okText: t('delete', { ns: 'common' }),
|
||||||
|
cancelText: t('cancel', { ns: 'common' }),
|
||||||
|
title: t('delAlert'),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dropdown
|
||||||
|
menu={{
|
||||||
|
items,
|
||||||
|
onClick: ({ domEvent }) => {
|
||||||
|
domEvent.stopPropagation();
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onOpenChange={(open) => setOpen(open)}
|
||||||
|
trigger={['click']}
|
||||||
|
>
|
||||||
|
<ActionIcon
|
||||||
|
icon={MoreVertical}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import { memo, useMemo, useState } from 'react';
|
||||||
|
import { shallow } from 'zustand/shallow';
|
||||||
|
|
||||||
|
import { DEFAULT_AGENT_AVATAR_URL } from '@/constants/common';
|
||||||
|
import { useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
import ListItem from '../../ListItem';
|
||||||
|
import Actions from './Actions';
|
||||||
|
|
||||||
|
interface SessionItemProps {
|
||||||
|
id: string;
|
||||||
|
onClick: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SessionItem = memo<SessionItemProps>(({ id, onClick }) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [active] = useAgentStore((s) => [s.currentIdentifier === id]);
|
||||||
|
const [getAgentById] = useAgentStore((s) => [s.getAgentById]);
|
||||||
|
|
||||||
|
const agent = getAgentById(id);
|
||||||
|
const { name, description, avatar } = agent?.meta || {};
|
||||||
|
|
||||||
|
const actions = useMemo(() => <Actions id={id} setOpen={setOpen} />, [id]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ListItem
|
||||||
|
actions={actions}
|
||||||
|
active={active}
|
||||||
|
avatar={avatar || DEFAULT_AGENT_AVATAR_URL}
|
||||||
|
description={description || agent?.systemRole}
|
||||||
|
onClick={onClick}
|
||||||
|
showAction={open}
|
||||||
|
title={name}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}, shallow);
|
||||||
|
|
||||||
|
export default SessionItem;
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import { Skeleton } from 'antd';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css }) => ({
|
||||||
|
avatar: css``,
|
||||||
|
paragraph: css`
|
||||||
|
height: 12px !important;
|
||||||
|
margin-top: 12px !important;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
height: 12px !important;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
title: css`
|
||||||
|
height: 14px !important;
|
||||||
|
margin-top: 4px !important;
|
||||||
|
margin-bottom: 12px !important;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
height: 14px !important;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const SkeletonList = () => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
|
||||||
|
const list = Array.from({ length: 4 }).fill('');
|
||||||
|
return (
|
||||||
|
<Flexbox gap={8} paddingInline={16}>
|
||||||
|
{list.map((_, index) => (
|
||||||
|
<Skeleton
|
||||||
|
active
|
||||||
|
avatar
|
||||||
|
key={index}
|
||||||
|
paragraph={{ className: styles.paragraph, rows: 1 }}
|
||||||
|
title={{ className: styles.title }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default SkeletonList;
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import { Empty } from 'antd';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import { isEqual } from 'lodash-es';
|
||||||
|
import { memo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import LazyLoad from 'react-lazy-load';
|
||||||
|
|
||||||
|
import { agentSelectors, useAgentStore } from '@/store/agent';
|
||||||
|
|
||||||
|
import SessionItem from './Item';
|
||||||
|
|
||||||
|
const useStyles = createStyles(
|
||||||
|
({ css }) => css`
|
||||||
|
min-height: 70px;
|
||||||
|
`,
|
||||||
|
);
|
||||||
|
|
||||||
|
interface SessionListProps {
|
||||||
|
filter?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SessionList = memo<SessionListProps>(({ filter }) => {
|
||||||
|
const [filterAgentListIds, activateAgent, agentListIds] = useAgentStore(
|
||||||
|
(s) => [
|
||||||
|
agentSelectors.filterAgentListIds(s, filter),
|
||||||
|
s.activateAgent,
|
||||||
|
agentSelectors.agentListIds(s),
|
||||||
|
],
|
||||||
|
isEqual,
|
||||||
|
);
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{filterAgentListIds.map((id) => (
|
||||||
|
<LazyLoad className={styles} key={id}>
|
||||||
|
<SessionItem
|
||||||
|
id={id}
|
||||||
|
onClick={() => {
|
||||||
|
activateAgent(id);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</LazyLoad>
|
||||||
|
))}
|
||||||
|
{agentListIds.length === 0 && (
|
||||||
|
<Empty description={t('noRole')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default SessionList;
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { Avatar, List, ListItemProps } from '@lobehub/ui';
|
||||||
|
import { useHover } from 'ahooks';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import { memo, useMemo, useRef } from 'react';
|
||||||
|
|
||||||
|
const { Item } = List;
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css, token }) => {
|
||||||
|
return {
|
||||||
|
container: css`
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
margin-block: 2px;
|
||||||
|
padding-right: 16px;
|
||||||
|
padding-left: 8px;
|
||||||
|
|
||||||
|
border-radius: ${token.borderRadius}px;
|
||||||
|
`,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const ListItem = memo<ListItemProps & { avatar: string }>(
|
||||||
|
({ avatar, active, showAction, actions, ...props }) => {
|
||||||
|
const ref = useRef(null);
|
||||||
|
const isHovering = useHover(ref);
|
||||||
|
const { styles } = useStyles();
|
||||||
|
|
||||||
|
const avatarRender = useMemo(
|
||||||
|
() => <Avatar animation={isHovering} avatar={avatar} shape="circle" size={46} />,
|
||||||
|
[isHovering, avatar],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Item
|
||||||
|
actions={actions}
|
||||||
|
active={active}
|
||||||
|
avatar={avatarRender}
|
||||||
|
className={styles.container}
|
||||||
|
ref={ref}
|
||||||
|
showAction={actions && (isHovering || showAction)}
|
||||||
|
{...(props as any)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export default ListItem;
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
import { Icon, SearchBar } from '@lobehub/ui';
|
||||||
|
import { Collapse } from 'antd';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import { ChevronDown } from 'lucide-react';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import SkeletonList from '@/components/SkeletonList';
|
||||||
|
|
||||||
|
import Elsa from './List/Elsa';
|
||||||
|
|
||||||
|
const List = dynamic(() => import('./List'), {
|
||||||
|
ssr: false,
|
||||||
|
loading: () => <SkeletonList style={{ marginTop: 8 }} />,
|
||||||
|
});
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css, token, prefixCls }) => ({
|
||||||
|
role: css`
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 100%;
|
||||||
|
`,
|
||||||
|
list: css`
|
||||||
|
padding: 8px;
|
||||||
|
`,
|
||||||
|
container: css`
|
||||||
|
.${prefixCls}-collapse-header {
|
||||||
|
padding-inline: 8px !important;
|
||||||
|
color: ${token.colorTextDescription} !important;
|
||||||
|
border-radius: ${token.borderRadius}px !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${token.colorText} !important;
|
||||||
|
background: ${token.colorFillTertiary};
|
||||||
|
.${prefixCls}-collapse-extra {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.${prefixCls}-collapse-extra {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.${prefixCls}-collapse-content {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
.${prefixCls}-collapse-content-box {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
icon: css`
|
||||||
|
transition: all 100ms ${token.motionEaseOut};
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const RoleList = () => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const [searchName, setSearchName] = useState<string>();
|
||||||
|
const { t } = useTranslation('role');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.role}>
|
||||||
|
<Flexbox style={{ padding: '0 8px 0' }} gap={8}>
|
||||||
|
<SearchBar
|
||||||
|
enableShortKey
|
||||||
|
onChange={(e) => {
|
||||||
|
setSearchName(e.target.value);
|
||||||
|
}}
|
||||||
|
placeholder={t('search', { ns: 'common' })}
|
||||||
|
shortKey="f"
|
||||||
|
spotlight
|
||||||
|
type={'block'}
|
||||||
|
value={searchName}
|
||||||
|
/>
|
||||||
|
</Flexbox>
|
||||||
|
<div className={styles.list}>
|
||||||
|
<Elsa />
|
||||||
|
<Collapse
|
||||||
|
bordered={false}
|
||||||
|
defaultActiveKey={'default'}
|
||||||
|
className={styles.container}
|
||||||
|
expandIcon={({ isActive }) => (
|
||||||
|
<Icon
|
||||||
|
className={styles.icon}
|
||||||
|
icon={ChevronDown}
|
||||||
|
size={{ fontSize: 16 }}
|
||||||
|
style={isActive ? {} : { rotate: '-90deg' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
expandIconPosition={'end'}
|
||||||
|
ghost
|
||||||
|
size={'small'}
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
children: <List filter={searchName} />,
|
||||||
|
label: t('roleList'),
|
||||||
|
key: 'default',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RoleList;
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
import { DraggablePanel } from '@lobehub/ui';
|
||||||
|
import { createStyles, useResponsive } from 'antd-style';
|
||||||
|
import { isEqual } from 'lodash-es';
|
||||||
|
import { rgba } from 'polished';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/token';
|
||||||
|
import { useGlobalStore } from '@/store/global';
|
||||||
|
|
||||||
|
import RoleHeader from './RoleHeader';
|
||||||
|
import RoleList from './RoleList';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css, token }) => ({
|
||||||
|
content: css`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100% !important;
|
||||||
|
`,
|
||||||
|
sidebar: css`
|
||||||
|
z-index: 10;
|
||||||
|
background-color: ${rgba(token.colorBgLayout, 0.2)};
|
||||||
|
backdrop-filter: saturate(180%) blur(8px);
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const SideBar = () => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const [showRoleList, setRoleList] = useGlobalStore((s) => [s.showRoleList, s.setRoleList]);
|
||||||
|
|
||||||
|
const { md = true } = useResponsive();
|
||||||
|
|
||||||
|
const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(showRoleList));
|
||||||
|
|
||||||
|
const handleExpand = (expand: boolean) => {
|
||||||
|
if (isEqual(expand, Boolean(showRoleList))) return;
|
||||||
|
setRoleList(expand);
|
||||||
|
setCacheExpand(expand);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (md && cacheExpand) setRoleList(true);
|
||||||
|
if (!md) setRoleList(false);
|
||||||
|
}, [md, cacheExpand]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DraggablePanel
|
||||||
|
className={styles.sidebar}
|
||||||
|
classNames={{ content: styles.content }}
|
||||||
|
maxWidth={SIDEBAR_MAX_WIDTH}
|
||||||
|
minWidth={SIDEBAR_WIDTH}
|
||||||
|
mode={md ? 'fixed' : 'float'}
|
||||||
|
placement={'left'}
|
||||||
|
onExpandChange={handleExpand}
|
||||||
|
expand={showRoleList}
|
||||||
|
>
|
||||||
|
<RoleHeader />
|
||||||
|
<RoleList />
|
||||||
|
</DraggablePanel>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SideBar;
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ReactNode, memo } from 'react';
|
||||||
|
|
||||||
|
import AppLayout from '@/layout/AppLayout';
|
||||||
|
|
||||||
|
export interface LayoutProps {
|
||||||
|
children?: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LayoutDesktop = (props: LayoutProps) => {
|
||||||
|
const { children } = props;
|
||||||
|
|
||||||
|
return <AppLayout>{children}</AppLayout>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default memo(LayoutDesktop);
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Spin } from 'antd';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
import React, { memo } from 'react';
|
||||||
|
import { Center, Flexbox } from 'react-layout-kit';
|
||||||
|
|
||||||
|
import SideBar from './SideBar';
|
||||||
|
import { useStyles } from './style';
|
||||||
|
|
||||||
|
const RoleEdit = dynamic(() => import('./RoleEdit'), {
|
||||||
|
ssr: false,
|
||||||
|
loading: () => (
|
||||||
|
<Center style={{ height: '100%', width: '100%' }}>
|
||||||
|
<Spin />
|
||||||
|
</Center>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
const Role = () => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
return (
|
||||||
|
<Flexbox
|
||||||
|
flex={1}
|
||||||
|
height={'100%'}
|
||||||
|
width={'100%'}
|
||||||
|
horizontal
|
||||||
|
style={{ overflow: 'hidden', position: 'relative' }}
|
||||||
|
>
|
||||||
|
<SideBar />
|
||||||
|
<Flexbox className={styles.preview} horizontal>
|
||||||
|
<RoleEdit />
|
||||||
|
</Flexbox>
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default memo(Role);
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
|
||||||
|
export const useStyles = createStyles(({ css, cx, token }) => ({
|
||||||
|
preview: cx(
|
||||||
|
'role-preview',
|
||||||
|
css`
|
||||||
|
overflow: scroll;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 ${token.paddingSM}px;
|
||||||
|
`,
|
||||||
|
),
|
||||||
|
container: css`
|
||||||
|
width: 1024px;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
`,
|
||||||
|
}));
|
||||||
Loading…
Reference in New Issue