feat: implement dataset creation step one with preview functionality (#30507)

Co-authored-by: CodingOnStar <hanxujiang@dify.ai>

web/app/components/datasets/create/step-one/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as usePreviewState } from './use-preview-state'
+export type { PreviewActions, PreviewState, UsePreviewStateReturn } from './use-preview-state'

web/app/components/datasets/create/step-one/hooks/use-preview-state.ts

@@ -0,0 +1,70 @@
+'use client'
+
+import type { NotionPage } from '@/models/common'
+import type { CrawlResultItem } from '@/models/datasets'
+import { useCallback, useState } from 'react'
+
+export type PreviewState = {
+  currentFile: File | undefined
+  currentNotionPage: NotionPage | undefined
+  currentWebsite: CrawlResultItem | undefined
+}
+
+export type PreviewActions = {
+  showFilePreview: (file: File) => void
+  hideFilePreview: () => void
+  showNotionPagePreview: (page: NotionPage) => void
+  hideNotionPagePreview: () => void
+  showWebsitePreview: (website: CrawlResultItem) => void
+  hideWebsitePreview: () => void
+}
+
+export type UsePreviewStateReturn = PreviewState & PreviewActions
+
+/**
+ * Custom hook for managing preview state across different data source types.
+ * Handles file, notion page, and website preview visibility.
+ */
+function usePreviewState(): UsePreviewStateReturn {
+  const [currentFile, setCurrentFile] = useState<File | undefined>()
+  const [currentNotionPage, setCurrentNotionPage] = useState<NotionPage | undefined>()
+  const [currentWebsite, setCurrentWebsite] = useState<CrawlResultItem | undefined>()
+
+  const showFilePreview = useCallback((file: File) => {
+    setCurrentFile(file)
+  }, [])
+
+  const hideFilePreview = useCallback(() => {
+    setCurrentFile(undefined)
+  }, [])
+
+  const showNotionPagePreview = useCallback((page: NotionPage) => {
+    setCurrentNotionPage(page)
+  }, [])
+
+  const hideNotionPagePreview = useCallback(() => {
+    setCurrentNotionPage(undefined)
+  }, [])
+
+  const showWebsitePreview = useCallback((website: CrawlResultItem) => {
+    setCurrentWebsite(website)
+  }, [])
+
+  const hideWebsitePreview = useCallback(() => {
+    setCurrentWebsite(undefined)
+  }, [])
+
+  return {
+    currentFile,
+    currentNotionPage,
+    currentWebsite,
+    showFilePreview,
+    hideFilePreview,
+    showNotionPagePreview,
+    hideNotionPagePreview,
+    showWebsitePreview,
+    hideWebsitePreview,
+  }
+}
+
+export default usePreviewState