youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 02:18:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(skill): add create blank skill modal with name validation

Browse Source 
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.
This commit is contained in:
yyh
2026-01-30 15:58:31 +08:00
parent e9608532bd
commit 5c0023b788
5 changed files with 198 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/app/components/workflow/skill/start-tab/create-import-section.tsx
View File

@ -1,26 +1,35 @@
'use client'
import { RiAddCircleFill, RiUploadLine } from '@remixicon/react'
import { memo } from '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')}
<>
<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)}
/>
<ActionCard
icon={<RiUploadLine className="size-5 text-text-accent" />}
title={t('skill.startTab.importSkill')}
description={t('skill.startTab.importSkillDesc')}
/>
</div>
</>
)
}