From 9f2a9ad27106886ec2f35620a596b468872a9380 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 17 Jul 2025 18:22:03 +0800
Subject: [PATCH] fix: update keyboard shortcut and clean up component
 structure in various files

---
 web/app/components/app-sidebar/index.tsx      |  2 +-
 .../datasets/list/dataset-footer/index.tsx    |  2 +-
 web/app/components/datasets/list/datasets.tsx |  5 ++--
 web/app/components/datasets/list/doc.tsx      | 25 +++++++++++--------
 web/app/components/datasets/list/index.tsx    |  7 +++---
 .../components/chunk-structure/hooks.tsx      |  2 +-
 .../workflow/nodes/knowledge-base/node.tsx    | 22 +++++++++++++---
 7 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index 8bfd04b914..2a79518aab 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -68,7 +68,7 @@ const AppDetailNav = ({
     }
   }, [appSidebarExpand, setAppSidebarExpand])
 
-  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.b`, (e) => {
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.b`, (e) => {
     e.preventDefault()
     handleToggle()
   }, { exactMatch: true, useCapture: true })
diff --git a/web/app/components/datasets/list/dataset-footer/index.tsx b/web/app/components/datasets/list/dataset-footer/index.tsx
index ecc47efc89..76d99a6491 100644
--- a/web/app/components/datasets/list/dataset-footer/index.tsx
+++ b/web/app/components/datasets/list/dataset-footer/index.tsx
@@ -7,7 +7,7 @@ const DatasetFooter = () => {
   const { t } = useTranslation()
 
   return (
-    <footer className='shrink-0 grow-0 px-12 py-6'>
+    <footer className='shrink-0 px-12 py-6'>
       <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('dataset.didYouKnow')}</h3>
       <p className='mt-1 text-sm font-normal leading-tight text-text-secondary'>
         {t('dataset.intro1')}<span className='inline-flex items-center gap-1 text-text-accent'>{t('dataset.intro2')}</span>{t('dataset.intro3')}<br />
diff --git a/web/app/components/datasets/list/datasets.tsx b/web/app/components/datasets/list/datasets.tsx
index 0e090e72ee..c47d08d75e 100644
--- a/web/app/components/datasets/list/datasets.tsx
+++ b/web/app/components/datasets/list/datasets.tsx
@@ -8,7 +8,6 @@ import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetList, useResetDatasetList } from '@/service/knowledge/use-dataset'
 
 type Props = {
-  containerRef: React.RefObject<HTMLDivElement>
   tags: string[]
   keywords: string
   includeAll: boolean
@@ -57,13 +56,13 @@ const Datasets = ({
 
   return (
     <>
-      <nav className='grid shrink-0 grow grid-cols-1 content-start gap-3 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
+      <nav className='grid grow grid-cols-1 content-start gap-3 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
         {isCurrentWorkspaceEditor && <NewDatasetCard />}
         {datasetList?.pages.map(({ data: datasets }) => datasets.map(dataset => (
           <DatasetCard key={dataset.id} dataset={dataset} onSuccess={resetDatasetList} />),
         ))}
+        <div ref={anchorRef} className='h-0' />
       </nav>
-      <div ref={anchorRef} className='h-0' />
     </>
   )
 }
diff --git a/web/app/components/datasets/list/doc.tsx b/web/app/components/datasets/list/doc.tsx
index efdfe157f2..6598523086 100644
--- a/web/app/components/datasets/list/doc.tsx
+++ b/web/app/components/datasets/list/doc.tsx
@@ -83,26 +83,26 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
   }, [apiBaseUrl, locale])
 
   return (
-    <div className="flex">
+    <div className='flex'>
       <div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
         {isTocExpanded
           ? (
-            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-components-panel-bg p-4 shadow-md">
-              <div className="mb-4 flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-text-primary">{t('appApi.develop.toc')}</h3>
+            <nav className='toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-components-panel-bg p-4 shadow-md'>
+              <div className='mb-4 flex items-center justify-between'>
+                <h3 className='text-lg font-semibold text-text-primary'>{t('appApi.develop.toc')}</h3>
                 <button
                   onClick={() => setIsTocExpanded(false)}
-                  className="text-text-tertiary hover:text-text-secondary"
+                  className='text-text-tertiary hover:text-text-secondary'
                 >
                   ✕
                 </button>
               </div>
-              <ul className="space-y-2">
+              <ul className='space-y-2'>
                 {toc.map((item, index) => (
                   <li key={index}>
                     <a
                       href={item.href}
-                      className="text-text-secondary transition-colors duration-200 hover:text-text-primary hover:underline"
+                      className='text-text-secondary transition-colors duration-200 hover:text-text-primary hover:underline'
                       onClick={e => handleTocClick(e, item)}
                     >
                       {item.text}
@@ -115,13 +115,18 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
           : (
             <button
               onClick={() => setIsTocExpanded(true)}
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
+              className='flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover'
             >
-              <RiListUnordered className="h-6 w-6 text-components-button-secondary-text" />
+              <RiListUnordered className='h-6 w-6 text-components-button-secondary-text' />
             </button>
           )}
       </div>
-      <article className={cn('prose-xl prose mx-1 rounded-t-xl bg-background-default px-4 pt-16 sm:mx-12', theme === Theme.dark && 'prose-invert')}>
+      <article
+        className={cn(
+          'prose-xl prose mx-1 rounded-t-xl bg-background-default px-4 pt-16 sm:mx-12',
+          theme === Theme.dark && 'prose-invert',
+        )}
+      >
         {Template}
       </article>
     </div>
diff --git a/web/app/components/datasets/list/index.tsx b/web/app/components/datasets/list/index.tsx
index 8f49be354e..b3bb330ef7 100644
--- a/web/app/components/datasets/list/index.tsx
+++ b/web/app/components/datasets/list/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 // Libraries
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useBoolean, useDebounceFn } from 'ahooks'
@@ -55,7 +55,6 @@ const List = () => {
   const [activeTab, setActiveTab] = useTabSearchParams({
     defaultTab: 'dataset',
   })
-  const containerRef = useRef<HTMLDivElement>(null)
   const { data } = useQuery(
     {
       queryKey: ['datasetApiBaseInfo'],
@@ -89,7 +88,7 @@ const List = () => {
   }, [currentWorkspace, router])
 
   return (
-    <div ref={containerRef} className='scroll-container relative flex grow flex-col overflow-y-auto bg-background-body'>
+    <div className='scroll-container relative flex grow flex-col overflow-y-auto bg-background-body'>
       <div className='sticky top-0 z-10 flex items-center justify-between gap-x-1 bg-background-body px-12 pb-2 pt-4'>
         <SegmentedControl
           value={activeTab}
@@ -131,7 +130,7 @@ const List = () => {
       </div>
       {activeTab === 'dataset' && (
         <>
-          <Datasets containerRef={containerRef} tags={tagIDs} keywords={searchKeywords} includeAll={includeAll} />
+          <Datasets tags={tagIDs} keywords={searchKeywords} includeAll={includeAll} />
           {!systemFeatures.branding.enabled && <DatasetFooter />}
           {showTagManagementModal && (
             <TagManagementModal type='knowledge' show={showTagManagementModal} />
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
index ab6e586ad4..b995bdb45b 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
@@ -53,7 +53,7 @@ export const useChunkStructure = () => {
   const options = [
     GeneralOption,
     ParentChildOption,
-    // QuestionAnswerOption,
+    QuestionAnswerOption,
   ]
 
   return {
diff --git a/web/app/components/workflow/nodes/knowledge-base/node.tsx b/web/app/components/workflow/nodes/knowledge-base/node.tsx
index c40acf0680..32810f4d3a 100644
--- a/web/app/components/workflow/nodes/knowledge-base/node.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/node.tsx
@@ -12,12 +12,26 @@ const Node: FC<NodeProps<KnowledgeBaseNodeType>> = ({ data }) => {
   return (
     <div className='mb-1 space-y-0.5 px-3 py-1'>
       <div className='flex h-6 items-center rounded-md bg-workflow-block-parma-bg px-1.5'>
-        <div className='system-xs-medium-uppercase mr-2 shrink-0 text-text-tertiary'>{t('datasetCreation.stepTwo.indexMode')}</div>
-        <div className='system-xs-medium grow truncate text-right text-text-secondary' title={data.indexing_technique}>{settingsDisplay[data.indexing_technique]}</div>
+        <div className='system-xs-medium-uppercase mr-2 shrink-0 text-text-tertiary'>
+          {t('datasetCreation.stepTwo.indexMode')}
+        </div>
+        <div
+          className='system-xs-medium grow truncate text-right text-text-secondary'
+          title={data.indexing_technique}
+        >
+          {settingsDisplay[data.indexing_technique as keyof typeof settingsDisplay]}
+        </div>
       </div>
       <div className='flex h-6 items-center rounded-md bg-workflow-block-parma-bg px-1.5'>
-        <div className='system-xs-medium-uppercase mr-2 shrink-0 text-text-tertiary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
-        <div className='system-xs-medium grow truncate text-right text-text-secondary' title={data.retrieval_model.search_method}>{(settingsDisplay as Record<string, string>)[data.retrieval_model.search_method]}</div>
+        <div className='system-xs-medium-uppercase mr-2 shrink-0 text-text-tertiary'>
+          {t('datasetSettings.form.retrievalSetting.title')}
+        </div>
+        <div
+          className='system-xs-medium grow truncate text-right text-text-secondary'
+          title={data.retrieval_model.search_method}
+        >
+          {settingsDisplay[data.retrieval_model.search_method as keyof typeof settingsDisplay]}
+        </div>
       </div>
     </div>
   )