diff --git a/web/app/components/datasets/common/document-picker/index.tsx b/web/app/components/datasets/common/document-picker/index.tsx
index 7d13890cd2..d964b2afda 100644
--- a/web/app/components/datasets/common/document-picker/index.tsx
+++ b/web/app/components/datasets/common/document-picker/index.tsx
@@ -17,6 +17,7 @@ import { useDocumentList } from '@/service/knowledge/use-document'
 import Loading from '@/app/components/base/loading'
 
 type Props = {
+  datasetId: string
   value: {
     name?: string
     extension?: string
@@ -27,6 +28,7 @@ type Props = {
 }
 
 const DocumentPicker: FC<Props> = ({
+  datasetId,
   value,
   onChange,
 }) => {
@@ -39,7 +41,7 @@ const DocumentPicker: FC<Props> = ({
   const [query, setQuery] = useState('')
 
   const { data } = useDocumentList({
-    datasetId: 'b8443630-cd2d-4fb7-aa65-21af8a858a7d',
+    datasetId,
     query: {
       keyword: query,
       page: 1,
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index 95144c2769..5d6e2baba2 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -28,6 +28,7 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 export const DocumentContext = createContext<{ datasetId?: string; documentId?: string; docForm: string }>({ docForm: '' })
 
 type DocumentTitleProps = {
+  datasetId: string
   extension?: string
   name?: string
   processMode?: ProcessMode
@@ -37,11 +38,12 @@ type DocumentTitleProps = {
   wrapperCls?: string
 }
 
-export const DocumentTitle: FC<DocumentTitleProps> = ({ extension, name, processMode, parent_mode, iconCls, textCls, wrapperCls }) => {
+export const DocumentTitle: FC<DocumentTitleProps> = ({ datasetId, extension, name, processMode, parent_mode, wrapperCls }) => {
   return (
     <div className={cn('flex items-center justify-start flex-1 cursor-pointer', wrapperCls)}>
       {/* // todo: handle file change */}
       <DocumentPicker
+        datasetId={datasetId}
         value={{
           name,
           extension,
@@ -145,6 +147,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
             <RiArrowLeftLine className='text-components-button-ghost-text hover:text-text-tertiary w-4 h-4' />
           </div>
           <DocumentTitle
+            datasetId={datasetId}
             extension={documentDetail?.data_source_info?.upload_file?.extension}
             name={documentDetail?.name}
             wrapperCls='mr-2'