mirror of
https://github.com/langgenius/dify.git
synced 2026-04-28 06:28:05 +08:00
06b6625c01
Add search functionality to skill sidebar using react-arborist's built-in searchTerm and searchMatch props. Search input is debounced at 300ms and filters tree nodes by name (case-insensitive). Also add success toast for rename operations.
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import type { FC } from 'react'
|
|
import * as React from 'react'
|
|
import { useCallback, useState } from 'react'
|
|
import EditorArea from './editor-area'
|
|
import EditorBody from './editor-body'
|
|
import EditorTabs from './editor-tabs'
|
|
import FileTree from './file-tree'
|
|
import Sidebar from './sidebar'
|
|
import SidebarSearchAdd from './sidebar-search-add'
|
|
import SkillDocEditor from './skill-doc-editor'
|
|
import SkillPageLayout from './skill-page-layout'
|
|
|
|
const SkillMain: FC = () => {
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
|
|
const handleSearchChange = useCallback((term: string) => {
|
|
setSearchTerm(term)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="h-full bg-workflow-canvas-workflow-top-bar-1 pl-3 pt-[52px]">
|
|
<SkillPageLayout>
|
|
<Sidebar>
|
|
<SidebarSearchAdd onSearchChange={handleSearchChange} />
|
|
<FileTree searchTerm={searchTerm} />
|
|
</Sidebar>
|
|
<EditorArea>
|
|
<EditorTabs />
|
|
<EditorBody>
|
|
<SkillDocEditor />
|
|
</EditorBody>
|
|
</EditorArea>
|
|
</SkillPageLayout>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(SkillMain)
|