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

feat(skill): add placeholder for inline tree node input

Browse Source 
Display localized placeholder text ("File name" / "Folder name") when
creating new files or folders in the skill editor file tree.
This commit is contained in:
yyh
2026-01-19 21:20:38 +08:00
parent 9ad1f30a8c
commit ff210a98db
3 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/app/components/workflow/skill/file-tree/tree-edit-input.tsx
View File

@ -4,13 +4,19 @@ import type { NodeApi } from 'react-arborist'
import type { TreeNodeData } from '../type'
import * as React from 'react'
import { useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
type TreeEditInputProps = {
node: NodeApi<TreeNodeData>
}
const TreeEditInput: React.FC<TreeEditInputProps> = ({ node }) => {
const { t } = useTranslation('workflow')
const inputRef = useRef<HTMLInputElement>(null)
const isFolder = node.data.node_type === 'folder'
const placeholder = isFolder
? t('skillSidebar.folderNamePlaceholder')
: t('skillSidebar.fileNamePlaceholder')
useEffect(() => {
inputRef.current?.focus()
@ -37,10 +43,11 @@ const TreeEditInput: React.FC<TreeEditInputProps> = ({ node }) => {
ref={inputRef}
type="text"
defaultValue={node.data.name}
placeholder={placeholder}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
onClick={e => e.stopPropagation()}
className="min-w-0 flex-1 rounded border border-components-input-border-active bg-transparent px-1 text-[13px] font-normal leading-4 text-text-primary outline-none"
className="min-w-0 flex-1 rounded border border-components-input-border-active bg-transparent px-1 text-[13px] font-normal leading-4 text-text-primary outline-none placeholder:text-text-placeholder"
/>
)
}