feat: knowledge pipeline (#25360)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: jyong <718720800@qq.com>
Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: quicksand <quicksandzn@gmail.com>
Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Harry <xh001x@hotmail.com>

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

@@ -1,10 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
 import { useShallow } from 'zustand/react/shallow'
-import { RiLayoutLeft2Line, RiLayoutRight2Line } from '@remixicon/react'
 import NavLink from './navLink'
 import type { NavIcon } from './navLink'
-import AppBasic from './basic'
 import AppInfo from './app-info'
 import DatasetInfo from './dataset-info'
 import AppSidebarDropdown from './app-sidebar-dropdown'
@@ -12,39 +10,48 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import cn from '@/utils/classnames'
+import Divider from '../base/divider'
+import { useHover, useKeyPress } from 'ahooks'
+import ToggleButton from './toggle-button'
+import { getKeyboardKeyCodeBySystem } from '../workflow/utils'
+import DatasetSidebarDropdown from './dataset-sidebar-dropdown'
 
 export type IAppDetailNavProps = {
-  iconType?: 'app' | 'dataset' | 'notion'
-  title: string
-  desc: string
-  isExternal?: boolean
-  icon: string
-  icon_background: string | null
+  iconType?: 'app' | 'dataset'
   navigation: Array<{
     name: string
     href: string
     icon: NavIcon
     selectedIcon: NavIcon
+    disabled?: boolean
   }>
   extraInfo?: (modeState: string) => React.ReactNode
 }
 
-const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
-  const { appSidebarExpand, setAppSiderbarExpand } = useAppStore(useShallow(state => ({
+const AppDetailNav = ({
+  navigation,
+  extraInfo,
+  iconType = 'app',
+}: IAppDetailNavProps) => {
+  const { appSidebarExpand, setAppSidebarExpand } = useAppStore(useShallow(state => ({
     appSidebarExpand: state.appSidebarExpand,
-    setAppSiderbarExpand: state.setAppSiderbarExpand,
+    setAppSidebarExpand: state.setAppSidebarExpand,
   })))
+  const sidebarRef = React.useRef<HTMLDivElement>(null)
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
   const expand = appSidebarExpand === 'expand'
 
-  const handleToggle = (state: string) => {
-    setAppSiderbarExpand(state === 'expand' ? 'collapse' : 'expand')
-  }
+  const handleToggle = useCallback(() => {
+    setAppSidebarExpand(appSidebarExpand === 'expand' ? 'collapse' : 'expand')
+  }, [appSidebarExpand, setAppSidebarExpand])
 
-  // // Check if the current path is a workflow canvas & fullscreen
+  const isHoveringSidebar = useHover(sidebarRef)
+
+  // Check if the current path is a workflow canvas & fullscreen
   const pathname = usePathname()
   const inWorkflowCanvas = pathname.endsWith('/workflow')
+  const isPipelineCanvas = pathname.endsWith('/pipeline')
   const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true'
   const [hideHeader, setHideHeader] = useState(workflowCanvasMaximize)
   const { eventEmitter } = useEventEmitterContextContext()
@@ -57,9 +64,14 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
   useEffect(() => {
     if (appSidebarExpand) {
       localStorage.setItem('app-detail-collapse-or-expand', appSidebarExpand)
-      setAppSiderbarExpand(appSidebarExpand)
+      setAppSidebarExpand(appSidebarExpand)
     }
-  }, [appSidebarExpand, setAppSiderbarExpand])
+  }, [appSidebarExpand, setAppSidebarExpand])
+
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.b`, (e) => {
+    e.preventDefault()
+    handleToggle()
+  }, { exactMatch: true, useCapture: true })
 
   if (inWorkflowCanvas && hideHeader) {
     return (
@@ -69,76 +81,74 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
     )
   }
 
+  if (isPipelineCanvas && hideHeader) {
+    return (
+      <div className='flex w-0 shrink-0'>
+        <DatasetSidebarDropdown navigation={navigation} />
+      </div>
+    )
+  }
+
   return (
     <div
-      className={`
-        flex shrink-0 flex-col border-r border-divider-burn bg-background-default-subtle transition-all
-        ${expand ? 'w-[216px]' : 'w-14'}
-      `}
+      ref={sidebarRef}
+      className={cn(
+        'flex shrink-0 flex-col border-r border-divider-burn bg-background-default-subtle transition-all',
+        expand ? 'w-[216px]' : 'w-14',
+      )}
     >
       <div
-        className={`
-          shrink-0
-          ${expand ? 'p-2' : 'p-1'}
-        `}
+        className={cn(
+          'shrink-0',
+          expand ? 'p-2' : 'p-1',
+        )}
       >
         {iconType === 'app' && (
           <AppInfo expand={expand} />
         )}
-        {iconType === 'dataset' && (
-          <DatasetInfo
-            name={title}
-            description={desc}
-            isExternal={isExternal}
-            expand={expand}
-            extraInfo={extraInfo && extraInfo(appSidebarExpand)}
-          />
-        )}
-        {!['app', 'dataset'].includes(iconType) && (
-          <AppBasic
-            mode={appSidebarExpand}
-            iconType={iconType}
-            icon={icon}
-            icon_background={icon_background}
-            name={title}
-            type={desc}
-            isExternal={isExternal}
-          />
+        {iconType !== 'app' && (
+          <DatasetInfo expand={expand} />
         )}
       </div>
-      <div className='px-4'>
-        <div className={cn('mx-auto mt-1 h-px bg-divider-subtle', !expand && 'w-6')} />
+      <div className='relative px-4 py-2'>
+        <Divider
+          type='horizontal'
+          bgStyle={expand ? 'gradient' : 'solid'}
+          className={cn(
+            'my-0 h-px',
+            expand
+              ? 'bg-gradient-to-r from-divider-subtle to-background-gradient-mask-transparent'
+              : 'bg-divider-subtle',
+          )}
+        />
+        {!isMobile && isHoveringSidebar && (
+          <ToggleButton
+            className='absolute -right-3 top-[-3.5px] z-20'
+            expand={expand}
+            handleToggle={handleToggle}
+          />
+        )}
       </div>
       <nav
-        className={`
-          grow space-y-1
-          ${expand ? 'p-4' : 'px-2.5 py-4'}
-        `}
+        className={cn(
+          'flex grow flex-col gap-y-0.5',
+          expand ? 'px-3 py-2' : 'p-3',
+        )}
       >
         {navigation.map((item, index) => {
           return (
-            <NavLink key={index} mode={appSidebarExpand} iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
+            <NavLink
+              key={index}
+              mode={appSidebarExpand}
+              iconMap={{ selected: item.selectedIcon, normal: item.icon }}
+              name={item.name}
+              href={item.href}
+              disabled={!!item.disabled}
+            />
           )
         })}
       </nav>
-      {
-        !isMobile && (
-          <div
-            className="shrink-0 px-4 py-3"
-          >
-            <div
-              className='flex h-6 w-6 cursor-pointer items-center justify-center'
-              onClick={() => handleToggle(appSidebarExpand)}
-            >
-              {
-                expand
-                  ? <RiLayoutRight2Line className='h-5 w-5 text-components-menu-item-text' />
-                  : <RiLayoutLeft2Line className='h-5 w-5 text-components-menu-item-text' />
-              }
-            </div>
-          </div>
-        )
-      }
+      {iconType !== 'app' && extraInfo && extraInfo(appSidebarExpand)}
     </div>
   )
 }