Merge remote-tracking branch 'origin/feat/rag-2' into feat/rag-2

web/app/components/app-sidebar/navLink.tsx

 'use client'
-
+import React from 'react'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import Link from 'next/link'
 import classNames from '@/utils/classnames'
   disabled?: boolean
 }
 
-export default function NavLink({
+const NavLink = ({
   name,
   href,
   iconMap,
   mode = 'expand',
   disabled = false,
-}: NavLinkProps) {
+}: NavLinkProps) => {
   const segment = useSelectedLayoutSegment()
   const formattedSegment = (() => {
     let res = segment?.toLowerCase()
     </Link>
   )
 }
+
+export default React.memo(NavLink)

web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx

 import type { DataSourceNodeCompletedResponse, DataSourceNodeErrorResponse } from '@/types/pipeline'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import { useDataSourceStore, useDataSourceStoreWithSelector } from '../store'
+import { useShallow } from 'zustand/react/shallow'
 
 type OnlineDocumentsProps = {
   isInPipeline?: boolean
   nodeData,
 }: OnlineDocumentsProps) => {
   const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
-  const documentsData = useDataSourceStoreWithSelector(state => state.documentsData)
-  const searchValue = useDataSourceStoreWithSelector(state => state.searchValue)
-  const selectedPagesId = useDataSourceStoreWithSelector(state => state.selectedPagesId)
-  const currentWorkspaceId = useDataSourceStoreWithSelector(state => state.currentWorkspaceId)
-  const currentNodeIdRef = useDataSourceStoreWithSelector(state => state.currentNodeIdRef)
+  const {
+    documentsData,
+    searchValue,
+    selectedPagesId,
+    currentWorkspaceId,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    documentsData: state.documentsData,
+    searchValue: state.searchValue,
+    selectedPagesId: state.selectedPagesId,
+    currentWorkspaceId: state.currentWorkspaceId,
+  })))
   const dataSourceStore = useDataSourceStore()
 
   const PagesMapAndSelectedPagesId: DataSourceNotionPageMap = useMemo(() => {
   }, [dataSourceStore, datasourceNodeRunURL])
 
   useEffect(() => {
+    const {
+      setDocumentsData,
+      setCurrentWorkspaceId,
+      setSearchValue,
+      setSelectedPagesId,
+      setOnlineDocuments,
+      setCurrentDocument,
+      currentNodeIdRef,
+    } = dataSourceStore.getState()
     if (nodeId !== currentNodeIdRef.current) {
-      const {
-        setDocumentsData,
-        setCurrentWorkspaceId,
-        setSearchValue,
-        setSelectedPagesId,
-        setOnlineDocuments,
-        setCurrentDocument,
-      } = dataSourceStore.getState()
       setDocumentsData([])
       setCurrentWorkspaceId('')
       setSearchValue('')

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx

 import { useDataSourceStore, useDataSourceStoreWithSelector } from '../store'
 import { convertOnlineDriveData } from './utils'
 import produce from 'immer'
+import { useShallow } from 'zustand/react/shallow'
 
 type OnlineDriveProps = {
   nodeId: string
   isInPipeline = false,
 }: OnlineDriveProps) => {
   const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
-  const prefix = useDataSourceStoreWithSelector(state => state.prefix)
-  const keywords = useDataSourceStoreWithSelector(state => state.keywords)
-  const bucket = useDataSourceStoreWithSelector(state => state.bucket)
-  const selectedFileKeys = useDataSourceStoreWithSelector(state => state.selectedFileKeys)
-  const fileList = useDataSourceStoreWithSelector(state => state.fileList)
-  const currentNodeIdRef = useDataSourceStoreWithSelector(state => state.currentNodeIdRef)
+  const {
+    prefix,
+    keywords,
+    bucket,
+    selectedFileKeys,
+    fileList,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    prefix: state.prefix,
+    keywords: state.keywords,
+    bucket: state.bucket,
+    selectedFileKeys: state.selectedFileKeys,
+    fileList: state.fileList,
+  })))
   const dataSourceStore = useDataSourceStore()
   const [isLoading, setIsLoading] = useState(false)
 
   }, [datasourceNodeRunURL, dataSourceStore])
 
   useEffect(() => {
+    const {
+      setFileList,
+      setBucket,
+      setPrefix,
+      setKeywords,
+      setSelectedFileKeys,
+      currentNodeIdRef,
+    } = dataSourceStore.getState()
     if (nodeId !== currentNodeIdRef.current) {
-      const {
-        setFileList,
-        setBucket,
-        setPrefix,
-        setKeywords,
-        setSelectedFileKeys,
-      } = dataSourceStore.getState()
       setFileList([])
       setBucket('')
       setPrefix([])

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx

 } from '@/types/pipeline'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import { useDataSourceStore, useDataSourceStoreWithSelector } from '../store'
+import { useShallow } from 'zustand/react/shallow'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
   const [crawledNum, setCrawledNum] = useState(0)
   const [crawlErrorMessage, setCrawlErrorMessage] = useState('')
   const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
-  const crawlResult = useDataSourceStoreWithSelector(state => state.crawlResult)
-  const step = useDataSourceStoreWithSelector(state => state.step)
-  const checkedCrawlResult = useDataSourceStoreWithSelector(state => state.websitePages)
-  const previewIndex = useDataSourceStoreWithSelector(state => state.previewIndex)
+  const {
+    crawlResult,
+    step,
+    checkedCrawlResult,
+    previewIndex,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    crawlResult: state.crawlResult,
+    step: state.step,
+    checkedCrawlResult: state.websitePages,
+    previewIndex: state.previewIndex,
+  })))
   const dataSourceStore = useDataSourceStore()
 
   const usePreProcessingParams = useRef(!isInPipeline ? usePublishedPipelinePreProcessingParams : useDraftPipelinePreProcessingParams)
             time_consuming: time_consuming ?? 0,
           }
           setCrawlResult(crawlResultData)
-          handleCheckedCrawlResultChange(crawlData || []) // default select the crawl result
+          handleCheckedCrawlResultChange(isInPipeline ? [crawlData[0]] : crawlData) // default select the crawl result
           setCrawlErrorMessage('')
           setStep(CrawlStep.finished)
         },
         },
       },
     )
-  }, [dataSourceStore, datasourceNodeRunURL, handleCheckedCrawlResultChange, t])
+  }, [dataSourceStore, datasourceNodeRunURL, handleCheckedCrawlResultChange, isInPipeline, t])
 
   const handleSubmit = useCallback((value: Record<string, any>) => {
     handleRun(value)

web/app/components/datasets/documents/create-from-pipeline/hooks.ts

 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import { useDataSourceStore, useDataSourceStoreWithSelector } from './data-source/store'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace } from '@/models/common'
+import { useShallow } from 'zustand/react/shallow'
 
 export const useAddDocumentsSteps = () => {
   const { t } = useTranslation()
 }
 
 export const useLocalFile = () => {
-  const fileList = useDataSourceStoreWithSelector(state => state.localFileList)
-  const currentLocalFile = useDataSourceStoreWithSelector(state => state.currentLocalFile)
+  const {
+    localFileList: fileList,
+    currentLocalFile,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    localFileList: state.localFileList,
+    currentLocalFile: state.currentLocalFile,
+  })))
   const dataSourceStore = useDataSourceStore()
 
   const allFileLoaded = useMemo(() => (fileList.length > 0 && fileList.every(file => file.file.id)), [fileList])
 }
 
 export const useOnlineDocuments = () => {
-  const documentsData = useDataSourceStoreWithSelector(state => state.documentsData)
-  const currentWorkspaceId = useDataSourceStoreWithSelector(state => state.currentWorkspaceId)
-  const onlineDocuments = useDataSourceStoreWithSelector(state => state.onlineDocuments)
-  const currentDocument = useDataSourceStoreWithSelector(state => state.currentDocument)
+  const {
+    documentsData,
+    currentWorkspaceId,
+    onlineDocuments,
+    currentDocument,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    documentsData: state.documentsData,
+    currentWorkspaceId: state.currentWorkspaceId,
+    onlineDocuments: state.onlineDocuments,
+    currentDocument: state.currentDocument,
+  })))
   const dataSourceStore = useDataSourceStore()
 
   const currentWorkspace = documentsData.find(workspace => workspace.workspace_id === currentWorkspaceId)
 }
 
 export const useWebsiteCrawl = () => {
-  const websitePages = useDataSourceStoreWithSelector(state => state.websitePages)
-  const currentWebsite = useDataSourceStoreWithSelector(state => state.currentWebsite)
+  const {
+    websitePages,
+    currentWebsite,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    websitePages: state.websitePages,
+    currentWebsite: state.currentWebsite,
+  })))
   const dataSourceStore = useDataSourceStore()
 
   const hideWebsitePreview = useCallback(() => {
 }
 
 export const useOnlineDrive = () => {
-  const fileList = useDataSourceStoreWithSelector(state => state.fileList)
-  const selectedFileKeys = useDataSourceStoreWithSelector(state => state.selectedFileKeys)
+  const {
+    fileList,
+    selectedFileKeys,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    fileList: state.fileList,
+    selectedFileKeys: state.selectedFileKeys,
+  })))
 
   const selectedOnlineDriveFileList = useMemo(() => {
     return selectedFileKeys.map(key => fileList.find(item => item.key === key)!)

web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx

 import Button from '@/app/components/base/button'
 import type { OnlineDriveFile } from '@/models/pipeline'
 import { DatasourceType } from '@/models/pipeline'
+import { getFileExtension } from '../data-source/online-drive/file-list/list/utils'
 
 type ChunkPreviewProps = {
   dataSourceType: DatasourceType
                 onlineDriveFiles.map(file => ({
                   id: file.key,
                   name: file.displayName,
-                  extension: 'md',
+                  extension: getFileExtension(previewOnlineDriveFile?.displayName),
                 }))
               }
               onChange={(selected) => {
                 {
                   id: previewOnlineDriveFile?.key || '',
                   name: previewOnlineDriveFile?.displayName || '',
-                  extension: 'md',
+                  extension: getFileExtension(previewOnlineDriveFile?.displayName),
                 }
               }
             />

web/app/components/rag-pipeline/components/panel/test-run/index.tsx

 import FooterTips from './footer-tips'
 import DataSourceProvider from '@/app/components/datasets/documents/create-from-pipeline/data-source/store/provider'
 import { useDataSourceStore, useDataSourceStoreWithSelector } from '@/app/components/datasets/documents/create-from-pipeline/data-source/store'
+import { useShallow } from 'zustand/react/shallow'
 
 const TestRunPanel = () => {
   const setShowDebugAndPreviewPanel = useWorkflowStoreWithSelector(state => state.setShowDebugAndPreviewPanel)
-  const fileList = useDataSourceStoreWithSelector(state => state.localFileList)
-  const onlineDocuments = useDataSourceStoreWithSelector(state => state.onlineDocuments)
-  const websitePages = useDataSourceStoreWithSelector(state => state.websitePages)
-  const selectedFileKeys = useDataSourceStoreWithSelector(state => state.selectedFileKeys)
+  const {
+    localFileList: fileList,
+    onlineDocuments,
+    websitePages,
+    selectedFileKeys,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    localFileList: state.localFileList,
+    onlineDocuments: state.onlineDocuments,
+    websitePages: state.websitePages,
+    selectedFileKeys: state.selectedFileKeys,
+  })))
   const dataSourceStore = useDataSourceStore()
   const [datasource, setDatasource] = useState<Datasource>()
 

web/app/components/rag-pipeline/components/rag-pipeline-children.tsx

 } from 'react'
 import { useStore } from '../../workflow/store'
 import InputField from './input-field'
+import PluginDependency from '../../workflow/plugin-dependency'
 import RagPipelinePanel from './panel'
 import RagPipelineHeader from './rag-pipeline-header'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
     handlePaneContextmenuCancel,
   } = usePanelInteractions()
   const {
-      exportCheck,
-      handleExportDSL,
+    exportCheck,
+    handleExportDSL,
   } = useDSL()
 
   eventEmitter?.useSubscription((v: any) => {
 
   return (
     <>
+      <PluginDependency />
       {
         showImportDSLModal && (
           <UpdateDSLModal

web/app/components/workflow-app/components/workflow-children.tsx

 import { DSL_EXPORT_CHECK } from '@/app/components/workflow/constants'
 import { useStore } from '@/app/components/workflow/store'
 import Features from '@/app/components/workflow/features'
+import PluginDependency from '../../workflow/plugin-dependency'
 import UpdateDSLModal from '@/app/components/workflow/update-dsl-modal'
 import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-modal'
 import {
 
   return (
     <>
+      <PluginDependency />
       {
         showFeaturesPanel && <Features />
       }

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

       return
     if (workflowCanvasWidth - 400 <= nodePanelWidth + otherPanelWidth)
       debounceUpdate(workflowCanvasWidth - 400 - otherPanelWidth)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nodePanelWidth, otherPanelWidth, workflowCanvasWidth, updateNodePanelWidth])
 
   const { handleNodeSelect } = useNodesInteractions()
   const [isPaused, setIsPaused] = useState(false)
 
   useEffect(() => {
-    if(data._singleRunningStatus === NodeRunningStatus.Running) {
+    if (data._singleRunningStatus === NodeRunningStatus.Running) {
       hasClickRunning.current = true
       setIsPaused(false)
     }
-    else if(data._isSingleRun && data._singleRunningStatus === undefined && hasClickRunning) {
+    else if (data._isSingleRun && data._singleRunningStatus === undefined && hasClickRunning) {
       setIsPaused(true)
       hasClickRunning.current = false
     }
     return {}
   })()
 
-  if(logParams.showSpecialResultPanel) {
+  if (logParams.showSpecialResultPanel) {
     return (
-    <div className={cn(
+      <div className={cn(
         'relative mr-1  h-full',
       )}>
         <div
   }
 
   return (
-    <div className={cn(
-      'relative mr-1  h-full',
-      showMessageLogModal && '!absolute -top-[5px] right-[416px] z-0 !mr-0 w-[384px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border shadow-lg transition-all',
-    )}>
+    <div
+      className={cn(
+        'relative mr-1 h-full',
+        showMessageLogModal && 'absolute z-0 mr-2 w-[400px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border shadow-lg transition-all',
+      )}
+      style={{
+        right: !showMessageLogModal ? '0' : `${otherPanelWidth}px`,
+      }}
+    >
       <div
         ref={triggerRef}
         className='absolute -left-1 top-0 flex h-full w-1 cursor-col-resize resize-x items-center justify-center'>
       </div>
       <div
         ref={containerRef}
-        className={cn('flex h-full flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
+        className={cn('flex h-full flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg transition-[width] ease-linear', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
         style={{
           width: `${nodePanelWidth}px`,
         }}
                     <div
                       className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
                       onClick={() => {
-                        if(isSingleRunning) {
+                        if (isSingleRunning) {
                           handleNodeDataUpdate({
                             id,
                             data: {
                     >
                       {
                         isSingleRunning ? <Stop className='h-4 w-4 text-text-tertiary' />
-                        : <RiPlayLargeLine className='h-4 w-4 text-text-tertiary' />
+                          : <RiPlayLargeLine className='h-4 w-4 text-text-tertiary' />
                       }
                     </div>
                   </Tooltip>