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/navLink.tsx

@@ -1,15 +1,15 @@
 'use client'
-
+import React from 'react'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import Link from 'next/link'
 import classNames from '@/utils/classnames'
 import type { RemixiconComponentType } from '@remixicon/react'
 
 export type NavIcon = React.ComponentType<
-React.PropsWithoutRef<React.ComponentProps<'svg'>> & {
-  title?: string | undefined
-  titleId?: string | undefined
-}> | RemixiconComponentType
+  React.PropsWithoutRef<React.ComponentProps<'svg'>> & {
+    title?: string | undefined
+    titleId?: string | undefined
+  }> | RemixiconComponentType
 
 export type NavLinkProps = {
   name: string
@@ -19,14 +19,16 @@ export type NavLinkProps = {
     normal: NavIcon
   }
   mode?: string
+  disabled?: boolean
 }
 
-export default function NavLink({
+const NavLink = ({
   name,
   href,
   iconMap,
   mode = 'expand',
-}: NavLinkProps) {
+  disabled = false,
+}: NavLinkProps) => {
   const segment = useSelectedLayoutSegment()
   const formattedSegment = (() => {
     let res = segment?.toLowerCase()
@@ -39,30 +41,59 @@ export default function NavLink({
   const isActive = href.toLowerCase().split('/')?.pop() === formattedSegment
   const NavIcon = isActive ? iconMap.selected : iconMap.normal
 
+  const renderIcon = () => (
+    <div className={classNames(mode !== 'expand' && '-ml-1')}>
+      <NavIcon className="h-4 w-4 shrink-0" aria-hidden="true" />
+    </div>
+  )
+
+  if (disabled) {
+    return (
+      <button
+        key={name}
+        type='button'
+        disabled
+        className={classNames(
+          'system-sm-medium flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover',
+          'pl-3 pr-1',
+        )}
+        title={mode === 'collapse' ? name : ''}
+        aria-disabled
+      >
+        {renderIcon()}
+        <span
+          className={classNames(
+            'overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
+            mode === 'expand'
+              ? 'ml-2 max-w-none opacity-100'
+              : 'ml-0 max-w-0 opacity-0',
+          )}
+        >
+          {name}
+        </span>
+      </button>
+    )
+  }
+
   return (
     <Link
       key={name}
       href={href}
       className={classNames(
-        isActive ? 'bg-state-accent-active font-semibold text-text-accent' : 'text-components-menu-item-text hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
-        'group flex h-9 items-center rounded-md py-2 text-sm font-normal',
-        mode === 'expand' ? 'px-3' : 'px-2.5',
+        isActive
+          ? 'system-sm-semibold border-b-[0.25px] border-l-[0.75px] border-r-[0.25px] border-t-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active text-text-accent-light-mode-only'
+          : 'system-sm-medium text-components-menu-item-text hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover',
+        'flex h-8 items-center rounded-lg pl-3 pr-1',
       )}
       title={mode === 'collapse' ? name : ''}
     >
-      <NavIcon
-        className={classNames(
-          'h-4 w-4 shrink-0',
-          mode === 'expand' ? 'mr-2' : 'mr-0',
-        )}
-        aria-hidden="true"
-      />
+      {renderIcon()}
       <span
         className={classNames(
-          'whitespace-nowrap transition-all duration-200 ease-in-out',
+          'overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
           mode === 'expand'
-            ? 'w-auto opacity-100'
-            : 'pointer-events-none w-0 overflow-hidden opacity-0',
+            ? 'ml-2 max-w-none opacity-100'
+            : 'ml-0 max-w-0 opacity-0',
         )}
       >
         {name}
@@ -70,3 +101,5 @@ export default function NavLink({
     </Link>
   )
 }
+
+export default React.memo(NavLink)