mirror of
https://github.com/langgenius/dify.git
synced 2026-02-13 07:01:23 -05:00
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { parseAsString, useQueryState } from 'nuqs'
|
|
import * as React from 'react'
|
|
import { useStore as useAppStore } from '@/app/components/app/store'
|
|
import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
|
|
import { isArtifactTab } from './constants'
|
|
import ArtifactsSection from './file-tree/artifacts/artifacts-section'
|
|
import FileTree from './file-tree/tree/file-tree'
|
|
import { useSkillAutoSave } from './hooks/use-skill-auto-save'
|
|
import { SkillSaveProvider } from './hooks/use-skill-save-manager'
|
|
import ContentArea from './skill-body/layout/content-area'
|
|
import ContentBody from './skill-body/layout/content-body'
|
|
import Sidebar from './skill-body/layout/sidebar'
|
|
import SkillPageLayout from './skill-body/layout/skill-page-layout'
|
|
import ArtifactContentPanel from './skill-body/panels/artifact-content-panel'
|
|
import FileContentPanel from './skill-body/panels/file-content-panel'
|
|
import SidebarSearchAdd from './skill-body/sidebar-search-add'
|
|
import FileTabs from './skill-body/tabs/file-tabs'
|
|
|
|
const SkillAutoSaveManager = () => {
|
|
useSkillAutoSave()
|
|
return null
|
|
}
|
|
|
|
const ContentRouter = () => {
|
|
const activeTabId = useStore(s => s.activeTabId)
|
|
if (isArtifactTab(activeTabId))
|
|
return <ArtifactContentPanel />
|
|
return <FileContentPanel />
|
|
}
|
|
|
|
const SkillMain = () => {
|
|
const appDetail = useAppStore(s => s.appDetail)
|
|
const appId = appDetail?.id || ''
|
|
const [queryFileId] = useQueryState('fileId', parseAsString)
|
|
const storeApi = useWorkflowStore()
|
|
const openedFileRef = React.useRef<string | null>(null)
|
|
|
|
React.useEffect(() => {
|
|
if (!queryFileId || openedFileRef.current === queryFileId)
|
|
return
|
|
openedFileRef.current = queryFileId
|
|
storeApi.getState().openTab(queryFileId, { pinned: true })
|
|
}, [queryFileId, storeApi])
|
|
|
|
return (
|
|
<div className="h-full bg-workflow-canvas-workflow-top-bar-1 pl-3 pt-[52px]">
|
|
<SkillSaveProvider appId={appId}>
|
|
<SkillAutoSaveManager />
|
|
<SkillPageLayout>
|
|
<Sidebar>
|
|
<SidebarSearchAdd />
|
|
<FileTree />
|
|
<ArtifactsSection />
|
|
</Sidebar>
|
|
<ContentArea>
|
|
<FileTabs />
|
|
<ContentBody>
|
|
<ContentRouter />
|
|
</ContentBody>
|
|
</ContentArea>
|
|
</SkillPageLayout>
|
|
</SkillSaveProvider>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(SkillMain)
|