Files
dify/web/app/components/workflow/skill/start-tab/create-import-section.tsx
yyh 5c0023b788 feat(skill): add create blank skill modal with name validation
Wire up the "Create Blank Skill" action card to open a modal where
users enter a skill name. The modal validates against existing skill
names in real-time and creates a folder with a SKILL.md file via
batchUpload, then opens the file as a pinned tab.
2026-01-30 16:10:19 +08:00

37 lines
1.1 KiB
TypeScript

'use client'
import { RiAddCircleFill, RiUploadLine } from '@remixicon/react'
import { memo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ActionCard from './action-card'
import CreateBlankSkillModal from './create-blank-skill-modal'
const CreateImportSection = () => {
const { t } = useTranslation('workflow')
const [isModalOpen, setIsModalOpen] = useState(false)
return (
<>
<div className="grid grid-cols-3 gap-2 px-6 pb-4 pt-6">
<ActionCard
icon={<RiAddCircleFill className="size-5 text-text-accent" />}
title={t('skill.startTab.createBlankSkill')}
description={t('skill.startTab.createBlankSkillDesc')}
onClick={() => setIsModalOpen(true)}
/>
<ActionCard
icon={<RiUploadLine className="size-5 text-text-accent" />}
title={t('skill.startTab.importSkill')}
description={t('skill.startTab.importSkillDesc')}
/>
</div>
<CreateBlankSkillModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
/>
</>
)
}
export default memo(CreateImportSection)